JavaScript

raw.js

!((storageKey, buttonId, darkTheme, lightTheme) => {
  const getTheme = () => {
    if (
      typeof localStorage !== "undefined" &&
      localStorage.getItem(storageKey)
    ) {
      return localStorage.getItem(storageKey);
    } else if (
      window.matchMedia(`(prefers-color-scheme: ${darkTheme})`).matches
    ) {
      return darkTheme;
    } else {
      return lightTheme;
    }
  };
  const setTheme = (theme = getTheme()) => {
    if (theme === lightTheme) {
      document.documentElement.classList.remove(darkTheme);
    } else {
      document.documentElement.classList.add(darkTheme);
    }
    window.localStorage.setItem(storageKey, theme);
  };
  const toggleButtonListener = () => {
    const button = document.getElementById(buttonId);
    if (button) {
      const listener = button.addEventListener("click", (event) => {
        event.preventDefault();
        setTheme(getTheme() === darkTheme ? lightTheme : darkTheme);
      });
    }
  };
  setTheme();
  document.addEventListener("astro:after-swap", () => setTheme());
  document.addEventListener("astro:page-load", toggleButtonListener);
})("_t_", "toggle-theme", "dark", "light");

astro viewtransition dark toggle script