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.
2026-07-09 19:41:30 +00:00
parent 5c016ca49e
commit 9c0427a1ec
4 changed files with 89 additions and 2 deletions
@@ -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>