website/_src/assets/js/theme.js

const basePath = "/assets/css";
const themeToggles = document.querySelectorAll(".theme-toggle");
const themeStylesheet = document.getElementById("themed");

const themes = [
  { name: "system", file: "default/system.css" },
  { name: "citrus",  file: "citrus/citrus.css" },
];

let currentTheme = localStorage.getItem("theme") || themes[0].name;
setTheme(currentTheme);

function setTheme(themeName) {
  const theme = themes.find(t => t.name === themeName);
  if (theme && themeStylesheet) {
    themeStylesheet.href = `${basePath}/${theme.file}`;
  }
}

themeToggles.forEach(btn =>
  btn.addEventListener("click", () => {
    currentTheme = themes[(themes.findIndex(t => t.name === currentTheme) + 1) % themes.length].name;
    setTheme(currentTheme);
    localStorage.setItem("theme", currentTheme);
  })
);