mozempk/insta-recipe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pwa): dynamic theme-color meta tags + transparent/dark mode icons
All checks were successful
Build & Push Docker Image / test-and-build (push) Successful in 1m3s
Details

Browse Source 
- +layout.svelte: replace Svelte logo favicon with actual InstaChef icons;
  add two <meta name="theme-color"> tags with media queries so the browser
  chrome (mobile top bar) matches --bg for light (#FFF8F5) and dark (#110510);
  add <meta name="color-scheme" content="dark light">
- manifest.json: split 'any maskable' into separate 'any' and 'maskable' entries;
  maskable uses icon-512-maskable.png (icon with 10% safe-zone padding on gradient bg)
- New icons:
  - icon-256/512.png → replaced with transparent-background versions
  - icon-256/512-transparent.png → white bg removed via flood-fill BFS
  - icon-256/512-dark.png → transparent icon on brand gradient (#833AB4→#E1306C)
  - icon-512-maskable.png → 80% icon centered on gradient (PWA maskable safe zone)
  - favicon-32.png → 32x32 transparent icon for browser tab
  - favicon.png (192×192) → updated to transparent InstaChef icon

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Giancarmine Salucci
2026-05-12 23:33:57 +02:00
parent 9e14613746
commit 22280d5536
11 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/routes/+layout.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import favicon from '$lib/assets/favicon.svg';
import InstallPrompt from './components/InstallPrompt.svelte';
import { onMount } from 'svelte';
import './layout.css';
@@ -11,16 +10,20 @@
if (!root) return;
const mq = window.matchMedia('(prefers-color-scheme: dark)');
root.setAttribute('data-theme', mq.matches ? 'dark' : 'light');
const handler = (e: MediaQueryListEvent) => {
root.setAttribute('data-theme', e.matches ? 'dark' : 'light');
};
const handler = (e: MediaQueryListEvent) => root!.setAttribute('data-theme', e.matches ? 'dark' : 'light');
mq.addEventListener('change', handler);
return () => mq.removeEventListener('change', handler);
});
</script>
<svelte:head>
<link rel="icon" href={favicon} />
<!-- Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/favicon.png" />
<!-- Theme color: matches --bg in light/dark theme -->
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#FFF8F5" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#110510" />
<meta name="color-scheme" content="dark light" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
<link