diff --git a/index.html b/index.html index 1b8b784..1f54471 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" /> - + ((set) => ({ } })); +// Status/navigation bar colour per theme so the PWA reads edge-to-edge +// (the system bars blend with the app background instead of showing bands). +const THEME_COLORS = { dark: '#0b1120', light: '#e6f7f4' } as const; + +function setThemeColorMeta(effective: 'light' | 'dark') { + let meta = document.querySelector( + 'meta[name="theme-color"]', + ) as HTMLMetaElement | null; + if (!meta) { + meta = document.createElement('meta'); + meta.name = 'theme-color'; + document.head.appendChild(meta); + } + meta.content = THEME_COLORS[effective]; +} + function applyTheme(theme: 'light' | 'dark' | 'system') { const root = window.document.documentElement; root.classList.remove('light', 'dark'); - if (theme === 'system') { - const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; - root.classList.add(systemTheme); - return; - } + const effective = + theme === 'system' + ? window.matchMedia('(prefers-color-scheme: dark)').matches + ? 'dark' + : 'light' + : theme; - root.classList.add(theme); + root.classList.add(effective); + setThemeColorMeta(effective); +} + +// Keep the theme in sync when the OS theme changes (only when set to "system"). +if (typeof window !== 'undefined') { + window + .matchMedia('(prefers-color-scheme: dark)') + .addEventListener('change', () => { + if (useAppStore.getState().theme === 'system') applyTheme('system'); + }); } diff --git a/vite.config.ts b/vite.config.ts index fc2af35..08480ed 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -19,7 +19,7 @@ export default defineConfig({ scope: "/", display: "standalone", orientation: "portrait", - theme_color: "#0f766e", + theme_color: "#0b1120", background_color: "#0b1120", categories: ["games", "utilities"], icons: [