grabowski
2f55723585
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.
57 lines
2.1 KiB
HTML
57 lines
2.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<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
|
|
rel="stylesheet"
|
|
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
|
crossorigin=""
|
|
/>
|
|
<script
|
|
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
|
crossorigin=""
|
|
></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" />
|
|
<link rel="stylesheet" href="./css/timeline.css" />
|
|
<link rel="stylesheet" href="./css/tabs.css" />
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
<script type="module" src="./js/app.js"></script>
|
|
</body>
|
|
</html>
|