roro9stack/site/static/js/theme.js

// The theme switch. Without JavaScript the page follows the visitor's setting (prefers-color-scheme);
// this adds a button that overrides it, remembered in this browser only.
(function () {
  var root = document.documentElement;
  root.classList.add("js");
  try {
    var saved = localStorage.getItem("theme");
    if (saved === "dark" || saved === "light") root.setAttribute("data-theme", saved);
  } catch (e) { /* storage blocked: the setting just isn't remembered */ }

  document.addEventListener("DOMContentLoaded", function () {
    var button = document.getElementById("theme-toggle");
    if (!button) return;
    function current() {
      return root.getAttribute("data-theme") || (window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark");
    }
    function show() {
      var next = current() === "dark" ? "light" : "dark";
      button.textContent = next === "light" ? "Light" : "Dark";
      button.setAttribute("aria-label", "Switch to the " + next + " theme");
    }
    button.addEventListener("click", function () {
      var next = current() === "dark" ? "light" : "dark";
      root.setAttribute("data-theme", next);
      try { localStorage.setItem("theme", next); } catch (e) { /* see above */ }
      show();
    });
    show();
  });
})();