From 318fef4880373fe5c12c366cd8b1c322771714e6 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sun, 27 Sep 2026 23:58:44 -0700 Subject: 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 Claude-Session: https://claude.ai/code/session_01VhUKyXKtsJ67QAFfb7QR9D --- src/app.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'src') 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 {} -- cgit v1.2.3