[Mobile] Barre d'état Android blanche, ignore le thème clair/sombre système #104

New issue

Closed

opened 2026-09-08 00:47:17 +02:00 by kyuno · 0 comments

kyuno commented

2026-09-08 00:47:17 +02:00

Owner

Résumé

Dans l'app Android, la bande de la barre d'état système est fixée à une couleur claire et le tint des icônes ne suit jamais le réglage clair/sombre du téléphone — en mode sombre système la zone paraît « cassée » (bande claire au-dessus d'une UI sombre).

Contexte (trouvé en auditant le code, pas supposé)

@capacitor/status-bar n'est pas installé (apps/web/package.json n'a que @capacitor/android|app|core|preferences|cli). Aucun appel StatusBar.setStyle / setBackgroundColor / setOverlaysWebView nulle part. apps/web/capacitor.config.ts n'a aucun bloc plugins.
apps/web/android/app/src/main/res/values/styles.xml : AppTheme.NoActionBar (parent Theme.AppCompat.DayNight.NoActionBar) code en dur <item name="android:statusBarColor">@color/colorPrimaryDark</item> et <item name="android:windowLightStatusBar">false</item> ; idem AppTheme.NoActionBarLaunch.
Aucun dossier res/values-night/ : @color/colorPrimaryDark (#244F38) et @color/colorBackground (#EEF2ED) résolvent aux mêmes valeurs claires en mode sombre. windowLightStatusBar=false est figé → icônes jamais en sombre-sur-clair.
apps/web/android/app/src/main/java/fr/kyuno/batchcooking/MainActivity.java est vide (extends BridgeActivity {}). AndroidManifest.xml a configChanges="…|uiMode|…" — un basculement clair/sombre système ne recrée pas l'Activity.
apps/web/index.html : pas de <meta name="theme-color">, viewport sans viewport-fit=cover.
Côté JS, le seul point qui connaît clair/sombre/système au runtime est apps/web/src/features/theme/ThemeContext.tsx applyTheme() — mais il est auth-gated (valeur via apiClient.getPreferences()), et un visiteur non connecté est en "SYSTEM" par défaut. Pas de listener matchMedia("(prefers-color-scheme…)") (le mode sombre est sinon 100 % CSS via _theme.scss).

Contenu attendu

Le fond de la barre d'état et le tint de ses icônes suivent le thème effectif de l'app (lequel suit l'OS quand la préférence app = SYSTEM).

Piste recommandée (à confirmer en implémentation) :

Ajouter @capacitor/status-bar + cap sync.
Bootstrap natif-only (dans main.tsx/bootstrap() ou dans ThemeContext une fois le thème résolu) : StatusBar.setStyle({ style }) + setBackgroundColor({ color }) depuis les tokens --color-* du thème résolu ; ré-appliquer au changement de thème et sur App appStateChange (couvre le switch OS live que uiMode empêche de recréer l'Activity).
Ajouter res/values-night/colors.xml (au moins colorPrimaryDark, colorBackground) pour la fenêtre pré-WebView + le splash ; retirer le windowLightStatusBar=false figé.
<meta name="theme-color" media="(prefers-color-scheme: …)"> dans index.html pour cohérence navigateur.

Alternative pure-native (sans JS) : WindowInsetsControllerCompat + onConfigurationChanged dans MainActivity.java + values-night/.

Gros ticket — peut être découpé (natif XML / plugin+JS / meta web) si besoin.

Dépendances

S'appuie sur ThemeContext (features/theme/) pour la source clair/sombre côté JS.

## Résumé Dans l'app Android, la bande de la barre d'état système est fixée à une couleur claire et le tint des icônes ne suit jamais le réglage clair/sombre du téléphone — en mode sombre système la zone paraît « cassée » (bande claire au-dessus d'une UI sombre). ## Contexte (trouvé en auditant le code, pas supposé) - **`@capacitor/status-bar` n'est pas installé** (`apps/web/package.json` n'a que `@capacitor/android|app|core|preferences|cli`). Aucun appel `StatusBar.setStyle` / `setBackgroundColor` / `setOverlaysWebView` nulle part. `apps/web/capacitor.config.ts` n'a aucun bloc `plugins`. - `apps/web/android/app/src/main/res/values/styles.xml` : `AppTheme.NoActionBar` (parent `Theme.AppCompat.DayNight.NoActionBar`) code en dur `<item name="android:statusBarColor">@color/colorPrimaryDark</item>` et `<item name="android:windowLightStatusBar">false</item>` ; idem `AppTheme.NoActionBarLaunch`. - **Aucun dossier `res/values-night/`** : `@color/colorPrimaryDark` (`#244F38`) et `@color/colorBackground` (`#EEF2ED`) résolvent aux mêmes valeurs claires en mode sombre. `windowLightStatusBar=false` est figé → icônes jamais en sombre-sur-clair. - `apps/web/android/app/src/main/java/fr/kyuno/batchcooking/MainActivity.java` est vide (`extends BridgeActivity {}`). `AndroidManifest.xml` a `configChanges="…|uiMode|…"` — un basculement clair/sombre système **ne recrée pas** l'Activity. - `apps/web/index.html` : pas de `<meta name="theme-color">`, viewport sans `viewport-fit=cover`. - Côté JS, le seul point qui connaît clair/sombre/système au runtime est `apps/web/src/features/theme/ThemeContext.tsx` `applyTheme()` — mais il est *auth-gated* (valeur via `apiClient.getPreferences()`), et un visiteur non connecté est en `"SYSTEM"` par défaut. Pas de listener `matchMedia("(prefers-color-scheme…)")` (le mode sombre est sinon 100 % CSS via `_theme.scss`). ## Contenu attendu Le fond de la barre d'état **et** le tint de ses icônes suivent le thème effectif de l'app (lequel suit l'OS quand la préférence app = `SYSTEM`). Piste recommandée (à confirmer en implémentation) : 1. Ajouter `@capacitor/status-bar` + `cap sync`. 2. Bootstrap natif-only (dans `main.tsx`/`bootstrap()` ou dans `ThemeContext` une fois le thème résolu) : `StatusBar.setStyle({ style })` + `setBackgroundColor({ color })` depuis les tokens `--color-*` du thème résolu ; ré-appliquer au changement de thème et sur `App` `appStateChange` (couvre le switch OS live que `uiMode` empêche de recréer l'Activity). 3. Ajouter `res/values-night/colors.xml` (au moins `colorPrimaryDark`, `colorBackground`) pour la fenêtre pré-WebView + le splash ; retirer le `windowLightStatusBar=false` figé. 4. `<meta name="theme-color" media="(prefers-color-scheme: …)">` dans `index.html` pour cohérence navigateur. Alternative pure-native (sans JS) : `WindowInsetsControllerCompat` + `onConfigurationChanged` dans `MainActivity.java` + `values-night/`. Gros ticket — peut être découpé (natif XML / plugin+JS / meta web) si besoin. ## Dépendances S'appuie sur `ThemeContext` (`features/theme/`) pour la source clair/sombre côté JS.