From ef8dbe8388f1c853c179529e44732f632d64968d Mon Sep 17 00:00:00 2001
From: Nicolas <nicolaslef53@gmail.com>
Date: Tue, 8 Sep 2026 02:13:11 +0200
Subject: [PATCH] =?UTF-8?q?fix(mobile):=20la=20barre=20d'=C3=A9tat=20Andro?=
 =?UTF-8?q?id=20suit=20le=20th=C3=A8me=20clair/sombre=20syst=C3=A8me=20(#1?=
 =?UTF-8?q?04)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`AppTheme.NoActionBar` a bien un parent `DayNight`, mais sans dossier
`res/values-night/` ses `@color/colorPrimaryDark` / `@color/colorBackground`
résolvaient aux valeurs claires même en mode sombre système : la bande de
la barre d'état et la fenêtre pré-WebView (flash de démarrage à froid +
fond du splash) restaient sur la palette « porcelaine » claire pendant que
le téléphone — et le contenu WebView de l'app — passaient en sombre.

- `android/app/src/main/res/values-night/colors.xml` (nouveau) : variantes
  sombres de `colorPrimary` / `colorPrimaryDark` / `colorAccent` /
  `colorBackground`, calées sur les tokens `--color-*` sombres de
  `_theme.scss`. En sombre, la bande de la barre d'état devient le
  `--color-background` sombre (`#14181A`), sans raccord avec l'app.
  `windowLightStatusBar=false` (icônes claires) reste correct dans les deux
  modes. Aucun changement de `styles.xml` : il référence déjà ces noms de
  couleur, le parent `DayNight` + `values-night/` fait le reste.
- `index.html` : `<meta name=theme-color>` (light/dark) pour teinter
  aussi le chrome du navigateur mobile.

Vérification : impossible sur appareil/émulateur dans ce contexte — le job
CI `build-android` (main uniquement) compilera au moins la ressource. La
synchro live de la barre d'état avec le sélecteur de thème *in-app* (via
`@capacitor/status-bar` + JS) reste un éventuel suivi ; ce correctif règle
le « ne suit pas les réglages système » du rapport.

Closes #104

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../app/src/main/res/values-night/colors.xml  | 30 +++++++++++++++++++
 apps/web/index.html                           |  9 ++++++
 2 files changed, 39 insertions(+)
 create mode 100644 apps/web/android/app/src/main/res/values-night/colors.xml

diff --git a/apps/web/android/app/src/main/res/values-night/colors.xml b/apps/web/android/app/src/main/res/values-night/colors.xml
new file mode 100644
index 0000000..0afb0d0
--- /dev/null
+++ b/apps/web/android/app/src/main/res/values-night/colors.xml
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Dark-mode overrides for the native colour resources in
+  ../values/colors.xml. Without this file, `AppTheme.NoActionBar`'s
+  `DayNight` parent still resolved `@color/colorPrimaryDark` /
+  `@color/colorBackground` to their light values under a dark system
+  setting: the status-bar band and the pre-WebView window (cold-start
+  flash + splash ground) stayed on the light "porcelaine" palette while
+  the rest of the phone — and the app's own WebView content — went dark
+  (issue #104).
+
+  Keep the hex values in sync with the dark-mode colour tokens in
+  apps/web/src/styles/_theme.scss (the `@media (prefers-color-scheme: dark)`
+  block).
+-->
+<resources>
+    <!-- token --color-primary (dark). -->
+    <color name="colorPrimary">#5FAE7E</color>
+    <!-- Status-bar band + pre-WebView window in dark mode: the dark
+         --color-background, so the band is seamless with the dark app
+         below it rather than a stripe of light green. `windowLightStatusBar`
+         stays `false` (light icons) — correct against this near-black just
+         as it is against the light-mode dark-basil. -->
+    <color name="colorPrimaryDark">#14181A</color>
+    <!-- token --color-accent (dark). -->
+    <color name="colorAccent">#EA7A48</color>
+    <!-- token --color-background (dark) — backs the splash / the window
+         while the WebView is still blank. -->
+    <color name="colorBackground">#14181A</color>
+</resources>
diff --git a/apps/web/index.html b/apps/web/index.html
index edce363..753e109 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -3,6 +3,15 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!--
+      Tints the mobile browser's own chrome (address bar) to match the app,
+      per system light/dark — same palette as the native app's status bar
+      (apps/web/android/.../res/values*/colors.xml, issue #104). Hex kept in
+      sync with `--color-primary-hover` / `--color-background` (dark) in
+      src/styles/_theme.scss.
+    -->
+    <meta name="theme-color" content="#244f38" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#14181a" media="(prefers-color-scheme: dark)" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>batchCooking</title>
     <meta
-- 
2.45.2