From 74351b24d244d8e772826dd0fbdfde0938f963b7 Mon Sep 17 00:00:00 2001
From: Zed <zed@agent.local>
Date: Sun, 12 Jul 2026 22:06:49 +0200
Subject: [PATCH] =?UTF-8?q?PWA=20edge-to-edge=20:=20theme-color=20accord?=
 =?UTF-8?q?=C3=A9=20au=20fond=20selon=20le=20th=C3=A8me?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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             |  2 +-
 src/stores/appStore.ts | 39 +++++++++++++++++++++++++++++++++------
 vite.config.ts         |  2 +-
 3 files changed, 35 insertions(+), 8 deletions(-)

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"
         />
-        <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."
diff --git a/src/stores/appStore.ts b/src/stores/appStore.ts
index 4fdd660..0b661ec 100644
--- a/src/stores/appStore.ts
+++ b/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');
+    });
 }
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: [