init

internal/app/static/theme.js

@@ -0,0 +1,64 @@
+(function () {
+  "use strict";
+
+  var storageKey = "hamkar-theme";
+  var root = document.documentElement;
+
+  function storedTheme() {
+    try {
+      return localStorage.getItem(storageKey);
+    } catch (_) {
+      return null;
+    }
+  }
+
+  function preferredTheme() {
+    var saved = storedTheme();
+    if (saved === "light" || saved === "dark") {
+      return saved;
+    }
+    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  }
+
+  function updateButtons(theme) {
+    document.querySelectorAll("[data-theme-toggle]").forEach(function (button) {
+      var dark = theme === "dark";
+      button.setAttribute("aria-pressed", String(dark));
+      button.setAttribute("aria-label", dark ? "Switch to light mode" : "Switch to dark mode");
+    });
+  }
+
+  function applyTheme(theme, persist) {
+    root.dataset.theme = theme;
+    root.style.colorScheme = theme;
+    updateButtons(theme);
+    if (persist) {
+      try {
+        localStorage.setItem(storageKey, theme);
+      } catch (_) {
+        // The theme still applies when storage is unavailable.
+      }
+    }
+  }
+
+  applyTheme(preferredTheme(), false);
+
+  document.addEventListener("DOMContentLoaded", function () {
+    updateButtons(root.dataset.theme);
+    document.querySelectorAll("[data-theme-toggle]").forEach(function (button) {
+      button.addEventListener("click", function () {
+        applyTheme(root.dataset.theme === "dark" ? "light" : "dark", true);
+      });
+    });
+  });
+
+  if (window.matchMedia) {
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function (event) {
+      if (!storedTheme()) {
+        applyTheme(event.matches ? "dark" : "light", false);
+      }
+    });
+  }
+})();