kobel/static/js/theme.js

// https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#aa-using-a-body-class

window.onload = (event) => {
  const btn = document.getElementById("theme-toggler");
  const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");
  const currentTheme = localStorage.getItem("theme");

  if (currentTheme == "dark") {
    document.body.classList.toggle("dark");
  } else if (currentTheme == "light") {
    document.body.classList.toggle("light");
    btn.classList.toggle("rotate-180");
  }

  btn.addEventListener("click", function () {
    btn.classList.toggle("rotate-180");
    var theme = "dark";
    if (darkTheme.matches) {
      document.body.classList.toggle("light");
      theme = document.body.classList.contains("light") ? "light" : "dark";
    } else {
      document.body.classList.toggle("dark");
      theme = document.body.classList.contains("dark") ? "dark" : "light";
    }
    localStorage.setItem("theme", theme);
  });
}