yawn/server/web/assets/theme.js

(() => {
  const key = "yawn:theme";
  const preference = matchMedia("(prefers-color-scheme: dark)");
  const saved = localStorage.getItem(key);
  let mode = ["auto", "light", "dark"].includes(saved) ? saved : "auto";

  const apply = () => {
    const resolved =
      mode === "auto" ? (preference.matches ? "dark" : "light") : mode;
    document.documentElement.dataset.theme = resolved;
    document.documentElement.dataset.themeMode = mode;
    document.documentElement.style.colorScheme = resolved;
    document
      .querySelector('meta[name="theme-color"]')
      ?.setAttribute("content", resolved === "dark" ? "#081522" : "#f7fbff");
    for (const select of document.querySelectorAll("[data-theme-select]"))
      select.value = mode;
    dispatchEvent(
      new CustomEvent("yawn-theme-change", { detail: { mode, resolved } }),
    );
  };

  const bind = () => {
    for (const select of document.querySelectorAll("[data-theme-select]")) {
      select.value = mode;
      select.addEventListener("change", () => {
        mode = select.value;
        if (mode === "auto") localStorage.removeItem(key);
        else localStorage.setItem(key, mode);
        apply();
      });
    }
  };

  preference.addEventListener("change", () => {
    if (mode === "auto") apply();
  });
  apply();
  if (document.readyState === "loading")
    addEventListener("DOMContentLoaded", bind, { once: true });
  else bind();
})();