Add light/dark mode toggle in settings
Settings gains a "Dark mode" switch. Theme preference is device-global (localStorage), independent of accounts. With no explicit choice the app keeps following the OS via prefers-color-scheme; picking a mode sets data-theme on <html>, which the CSS treats as an override (attribute selector beats the media query). A tiny <head> script applies a saved choice before first paint to avoid a light/dark flash. Toggling previews live, independent of Save/Cancel. Bumps the service-worker cache. Verified in a headless-browser run: default follows OS, enabling dark swaps the palette, the choice persists across reload, and toggling back restores light.
This commit is contained in:
Alexander Heldt
+24
@@ -1485,15 +1485,39 @@
|
||||
});
|
||||
|
||||
// Settings dialog (puppy name + birthday)
|
||||
// ---------- theme ----------
|
||||
// Preference is device-global (not per user). No stored choice → follow the
|
||||
// OS via the prefers-color-scheme media query; a choice sets data-theme on
|
||||
// <html>, which the CSS treats as an override. The <head> applies any saved
|
||||
// choice before first paint; this just resolves state and reacts to the toggle.
|
||||
const THEME_KEY = "puppy-tracker:theme";
|
||||
const prefersDark = () =>
|
||||
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
function effectiveTheme() {
|
||||
const s = localStorage.getItem(THEME_KEY);
|
||||
return s === "light" || s === "dark" ? s : (prefersDark() ? "dark" : "light");
|
||||
}
|
||||
function setTheme(theme) {
|
||||
document.documentElement.dataset.theme = theme;
|
||||
try { localStorage.setItem(THEME_KEY, theme); } catch { /* ignore */ }
|
||||
}
|
||||
|
||||
const settingsDialog = document.getElementById("settings-dialog");
|
||||
const settingsForm = document.getElementById("settings-form");
|
||||
const settingsName = document.getElementById("settings-name");
|
||||
const settingsBirthday = document.getElementById("settings-birthday");
|
||||
const settingsTheme = document.getElementById("settings-theme");
|
||||
|
||||
// Apply live so the toggle previews immediately (independent of Save/Cancel).
|
||||
settingsTheme.addEventListener("change", () => {
|
||||
setTheme(settingsTheme.checked ? "dark" : "light");
|
||||
});
|
||||
|
||||
function openSettingsDialog() {
|
||||
const cfg = loadConfig();
|
||||
settingsName.value = cfg.name;
|
||||
settingsBirthday.value = cfg.birthday;
|
||||
settingsTheme.checked = effectiveTheme() === "dark";
|
||||
settingsDialog.showModal();
|
||||
setTimeout(() => settingsName.focus(), 50);
|
||||
}
|
||||
|
||||
@@ -9,6 +9,16 @@
|
||||
<link rel="icon" href="icon.svg" type="image/svg+xml" />
|
||||
<link rel="apple-touch-icon" href="icon.svg" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<script>
|
||||
// Apply a saved theme before first paint so there's no light/dark flash.
|
||||
// No saved choice → leave it to the prefers-color-scheme media query.
|
||||
(function () {
|
||||
try {
|
||||
var t = localStorage.getItem("puppy-tracker:theme");
|
||||
if (t === "light" || t === "dark") document.documentElement.dataset.theme = t;
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Login / register gate. Shown until the session check succeeds; the app
|
||||
@@ -188,6 +198,10 @@
|
||||
<label>Birthday
|
||||
<input type="date" id="settings-birthday" />
|
||||
</label>
|
||||
<label class="toggle-row">
|
||||
<span>Dark mode</span>
|
||||
<input type="checkbox" id="settings-theme" role="switch" class="switch" />
|
||||
</label>
|
||||
<menu>
|
||||
<button value="cancel" class="ghost">Cancel</button>
|
||||
<button value="save" id="settings-save">Save</button>
|
||||
|
||||
+50
-1
@@ -17,8 +17,12 @@
|
||||
--shadow: 0 1px 2px rgba(20, 14, 60, 0.05), 0 4px 16px rgba(20, 14, 60, 0.05);
|
||||
}
|
||||
|
||||
/* Dark palette. Two triggers, same values (CSS has no way to share them):
|
||||
system prefers dark and the user hasn't forced light, OR the user picked
|
||||
dark via the Settings toggle. The [data-theme] attribute (set from JS) beats
|
||||
the media query on specificity, so an explicit choice always wins. */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
:root:not([data-theme="light"]) {
|
||||
--bg: #14131a;
|
||||
--surface: #1f1e28;
|
||||
--text: #ebeaf2;
|
||||
@@ -29,6 +33,16 @@
|
||||
--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
:root[data-theme="dark"] {
|
||||
--bg: #14131a;
|
||||
--surface: #1f1e28;
|
||||
--text: #ebeaf2;
|
||||
--muted: #9c9bab;
|
||||
--accent: #a690ff;
|
||||
--accent-soft: #2a2640;
|
||||
--border: #2c2a3a;
|
||||
--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
@@ -614,3 +628,38 @@ button.linklike:hover { text-decoration: underline; filter: none; }
|
||||
line-height: 1.4;
|
||||
}
|
||||
.danger-text strong { color: var(--danger); }
|
||||
|
||||
/* ---------- settings toggle switch ---------- */
|
||||
.toggle-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.toggle-row > span { color: var(--text); font-size: 0.95rem; }
|
||||
input.switch {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
width: 44px;
|
||||
height: 26px;
|
||||
margin: 0;
|
||||
border-radius: 13px;
|
||||
background: var(--border);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
input.switch::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
input.switch:checked { background: var(--accent); }
|
||||
input.switch:checked::after { transform: translateX(18px); }
|
||||
|
||||
Reference in New Issue
Block a user