fix(mobile): la barre d'état Android suit le thème clair/sombre système (#104)
All checks were successful
All checks were successful
`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>
This commit is contained in:
parent
f8b224dc8c
commit
ef8dbe8388
2 changed files with 39 additions and 0 deletions
30
apps/web/android/app/src/main/res/values-night/colors.xml
Normal file
30
apps/web/android/app/src/main/res/values-night/colors.xml
Normal file
|
|
@ -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>
|
||||||
|
|
@ -3,6 +3,15 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<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" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<title>batchCooking</title>
|
<title>batchCooking</title>
|
||||||
<meta
|
<meta
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue