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

1 files changed, 8 insertions, 1 deletions

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 {}