PWA edge-to-edge : theme-color accordé au fond selon le thème

Les barres système (statut/navigation) affichaient des bandes ne
correspondant pas au fond de l'app. La meta theme-color est désormais
mise à jour dynamiquement selon le thème (navy en sombre, clair en clair),
et le manifeste + index.html passent en navy. Les barres se fondent avec
l'app (rendu edge-to-edge).

Note : réinstaller la PWA pour appliquer le nouveau manifeste.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

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"
         />
-        <meta name="theme-color" content="#0f766e" />
+        <meta name="theme-color" content="#0b1120" />
         <meta
             name="description"
             content="Skori — Gestion des scores pour vos jeux de société : Skyjo, Azul, Cabo, Harmonies, Odin."

src/stores/appStore.ts

@@ -39,15 +39,42 @@ export const useAppStore = create<AppState>((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');
+    });
 }

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