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: [