grabowski/trip-plan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a dark/light theme switcher to the navbar

Browse Source 
The palette already lived in CSS custom properties, so dark mode is a
token-override block in the new theme.css, applied via data-theme on
the document element. A moon/sun toggle sits top right in the navbar;
an explicit choice persists in localStorage, otherwise the app follows
the OS preference live. An inline head script applies the theme before
first paint so a dark reload never flashes light.

Token hygiene sweep alongside: literal colours that broke under a dark
palette (timeline chip text, color-mix against white, calendar stripes
and bands, warning banners, nav background) moved into ten new tokens
with light-mode values unchanged. The flip clock keeps its fixed dark
look by design; the map keeps standard light tiles in both themes.
This commit is contained in:
grabowski
2026-08-30 14:07:21 +02:00
parent 48c7a55bbd
commit 2f55723585
6 changed files with 207 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+23 -1
View File
@@ -3,9 +3,30 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light" />
<meta name="color-scheme" content="light dark" />
<title>Trip Plan</title>
<!-- Applies the theme attribute before the stylesheets paint, so there's
no flash of the wrong theme. Resolution order: an explicit user
choice in localStorage, else the OS preference. See docs/API.md
"Theme switcher (dark/light, frontend-only)". -->
<script>
(function () {
var theme = 'light';
try {
var stored = localStorage.getItem('theme');
if (stored === 'light' || stored === 'dark') {
theme = stored;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme = 'dark';
}
} catch (e) {
// localStorage may throw in privacy modes; fall back to light.
}
document.documentElement.setAttribute('data-theme', theme);
})();
</script>
<!-- Leaflet (map) from unpkg CDN. Classic scripts run before the deferred
ES module below, so window.L is ready by the time app.js executes. -->
<link
@@ -21,6 +42,7 @@
></script>
<link rel="stylesheet" href="./css/styles.css" />
<link rel="stylesheet" href="./css/theme.css" />
<link rel="stylesheet" href="./css/flipclock.css" />
<link rel="stylesheet" href="./css/checklist.css" />
<link rel="stylesheet" href="./css/expenses.css" />