alex/puppy-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add light/dark mode toggle in settings

Browse Source 
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.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Alexander Heldt
2026-07-09 19:41:30 +00:00
parent a1a3ccf339
commit bb7373166e
4 changed files with 89 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.js
+24
View File
@@ -1485,15 +1485,39 @@
}); });
// Settings dialog (puppy name + birthday) // 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 settingsDialog = document.getElementById("settings-dialog");
const settingsForm = document.getElementById("settings-form"); const settingsForm = document.getElementById("settings-form");
const settingsName = document.getElementById("settings-name"); const settingsName = document.getElementById("settings-name");
const settingsBirthday = document.getElementById("settings-birthday"); 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() { function openSettingsDialog() {
const cfg = loadConfig(); const cfg = loadConfig();
settingsName.value = cfg.name; settingsName.value = cfg.name;
settingsBirthday.value = cfg.birthday; settingsBirthday.value = cfg.birthday;
settingsTheme.checked = effectiveTheme() === "dark";
settingsDialog.showModal(); settingsDialog.showModal();
setTimeout(() => settingsName.focus(), 50); setTimeout(() => settingsName.focus(), 50);
} }
src/index.html
+14
View File
@@ -9,6 +9,16 @@
<link rel="icon" href="icon.svg" type="image/svg+xml" /> <link rel="icon" href="icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="icon.svg" /> <link rel="apple-touch-icon" href="icon.svg" />
<link rel="stylesheet" href="style.css" /> <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> </head>
<body> <body>
<!-- Login / register gate. Shown until the session check succeeds; the app <!-- Login / register gate. Shown until the session check succeeds; the app
@@ -188,6 +198,10 @@
<label>Birthday <label>Birthday
<input type="date" id="settings-birthday" /> <input type="date" id="settings-birthday" />
</label> </label>
<label class="toggle-row">
<span>Dark mode</span>
<input type="checkbox" id="settings-theme" role="switch" class="switch" />
</label>
<menu> <menu>
<button value="cancel" class="ghost">Cancel</button> <button value="cancel" class="ghost">Cancel</button>
<button value="save" id="settings-save">Save</button> <button value="save" id="settings-save">Save</button>
src/style.css
+50 -1
View File
@@ -17,8 +17,12 @@
--shadow: 0 1px 2px rgba(20, 14, 60, 0.05), 0 4px 16px rgba(20, 14, 60, 0.05); --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) { @media (prefers-color-scheme: dark) {
:root { :root:not([data-theme="light"]) {
--bg: #14131a; --bg: #14131a;
--surface: #1f1e28; --surface: #1f1e28;
--text: #ebeaf2; --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); --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; } * { box-sizing: border-box; }
@@ -614,3 +628,38 @@ button.linklike:hover { text-decoration: underline; filter: none; }
line-height: 1.4; line-height: 1.4;
} }
.danger-text strong { color: var(--danger); } .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); }
src/sw.js
+1 -1
View File
@@ -1,4 +1,4 @@
const CACHE = "puppy-tracker-v7"; const CACHE = "puppy-tracker-v8";
const PHOTO_CACHE = "puppy-tracker-photos-v1"; const PHOTO_CACHE = "puppy-tracker-photos-v1";
const ASSETS = [ const ASSETS = [
"./", "./",