tracker/static/theme.js

// Theme switch: "system" follows the OS (prefers-color-scheme); "light" and
// "dark" are stored per browser and applied through html[data-theme].
(() => {
  const KEY = "tracker-theme";
  const root = document.documentElement;
  const buttons = document.querySelectorAll("[data-theme-choice]");

  const read = () => {
    try { return localStorage.getItem(KEY) || "system"; } catch { return "system"; }
  };
  const apply = (choice) => {
    if (choice === "light" || choice === "dark") root.dataset.theme = choice;
    else delete root.dataset.theme;
    buttons.forEach((b) => b.setAttribute("aria-pressed", String(b.dataset.themeChoice === choice)));
  };

  buttons.forEach((b) =>
    b.addEventListener("click", () => {
      const choice = b.dataset.themeChoice;
      try {
        if (choice === "system") localStorage.removeItem(KEY);
        else localStorage.setItem(KEY, choice);
      } catch {}
      apply(choice);
    })
  );
  apply(read());
})();