The Android app's system bars follow the system theme, and the page's theme colour follows the app's.

One dark colour for both bars gave white navigation icons over a light page
under gesture navigation. The wrapper (1.9, versionCode 10) now uses the
page background in light mode and the dark theme colour in dark mode, for
the status bar and the navigation bar alike. The page updates its
theme-color meta when its own theme is applied, so a PWA's status bar and
the wrapper's follow the same switch.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01VhUKyXKtsJ67QAFfb7QR9D

6 files changed, 23 insertions, 12 deletions

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 5fa19ba..928f12d 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -29,8 +29,8 @@ android {
     applicationId 'io.coinos.app'
     minSdk 24
     targetSdk 35
-    versionCode 9
-    versionName '1.8'
+    versionCode 10
+    versionName '1.9'
   }
   // Two builds of the same wallet.
   //
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 36f9d1e..b0dddbd 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -31,20 +31,20 @@
           android:name="android.support.customtabs.trusted.DEFAULT_URL"
           android:value="https://v3.coinos.io/" />
       <!-- System-bar colors: without these the TWA status bar defaults to
-           white. Match the PWA's dark theme_color (#15171a). Light + dark
-           variants both dark so it's consistent whatever the system theme. -->
+           white. Light follows the page background, dark the PWA's
+           theme_color, so the bar icons keep their contrast either way. -->
       <meta-data
           android:name="android.support.customtabs.trusted.STATUS_BAR_COLOR"
           android:resource="@color/statusBarColor" />
       <meta-data
           android:name="android.support.customtabs.trusted.STATUS_BAR_COLOR_DARK"
-          android:resource="@color/statusBarColor" />
+          android:resource="@color/statusBarColorDark" />
       <meta-data
           android:name="android.support.customtabs.trusted.NAVIGATION_BAR_COLOR"
           android:resource="@color/navigationBarColor" />
       <meta-data
           android:name="android.support.customtabs.trusted.NAVIGATION_BAR_COLOR_DARK"
-          android:resource="@color/navigationBarColor" />
+          android:resource="@color/navigationBarColorDark" />
       <intent-filter>
         <action android:name="android.intent.action.MAIN" />
         <category android:name="android.intent.category.LAUNCHER" />
diff --git a/android/app/src/main/res/values/colors.xml b/android/app/src/main/res/values/colors.xml
index 42e2db8..d444318 100644
--- a/android/app/src/main/res/values/colors.xml
+++ b/android/app/src/main/res/values/colors.xml
@@ -1,8 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
   <color name="ic_launcher_background">#FFFFFF</color>
-  <!-- TWA system-bar colors: match the PWA's theme_color (#15171a) so the
-       status bar isn't the androidbrowserhelper default white. -->
-  <color name="statusBarColor">#15171A</color>
-  <color name="navigationBarColor">#15171A</color>
+  <!-- TWA system-bar colors, per system theme: the page background in
+       light mode (dark icons) and the PWA's theme_color in dark mode (light
+       icons). One dark colour for both used to give white nav icons over a
+       light page under gesture navigation. -->
+  <color name="statusBarColor">#EEF0F3</color>
+  <color name="navigationBarColor">#EEF0F3</color>
+  <color name="statusBarColorDark">#15171A</color>
+  <color name="navigationBarColorDark">#15171A</color>
 </resources>
diff --git a/build.js b/build.js
index 3993d08..c90e527 100644
--- a/build.js
+++ b/build.js
@@ -376,7 +376,7 @@ async function pageHtml({ css, staging, pwa, scriptHtml }) {
 <meta name="color-scheme" content="light dark">
 <title>${staging ? 'Coinos Staging' : 'Coinos'}</title>
 <link rel="icon" href="${FAVICON}">
-<script>try{var t=localStorage.getItem('btc-wallet-theme');if(t!=='dark'&&t!=='light')t=matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light';document.documentElement.dataset.theme=t;}catch(e){}</script>
+<script>try{var t=localStorage.getItem('btc-wallet-theme');if(t!=='dark'&&t!=='light')t=matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light';document.documentElement.dataset.theme=t;var m=document.querySelector('meta[name="theme-color"]');if(m)m.setAttribute('content',t==='dark'?'#15171a':'#eef0f3');}catch(e){}</script>
 ${pwa ? PWA_HEAD : ''}<style>${css}</style>
 </head>
 <body>
diff --git a/src/app.js b/src/app.js
index 267c18e..cb6a030 100644
--- a/src/app.js
+++ b/src/app.js
@@ -386,7 +386,14 @@ function resolvedTheme() {
   return 'light';
 }
 function applyTheme() {
-  try { document.documentElement.dataset.theme = resolvedTheme(); } catch {}
+  try {
+    const th = resolvedTheme();
+    document.documentElement.dataset.theme = th;
+    // the browser's status bar (a PWA, or the Android app) takes its colour
+    // from here: the page background in light, the dark theme colour in dark
+    const meta = document.querySelector('meta[name="theme-color"]');
+    if (meta) meta.setAttribute('content', th === 'dark' ? '#15171a' : '#eef0f3');
+  } catch {}
 }
 function toggleTheme() {
   try { localStorage.setItem(THEME_KEY, resolvedTheme() === 'dark' ? 'light' : 'dark'); } catch {}
diff --git a/static/coinos.apk b/static/coinos.apk
index 7a30775..7958b18 100644
--- a/static/coinos.apk
+++ b/static/coinos.apk