Atomcms-edit/resources/themes/atom/js/components/ThemeSwitcher.ts

type Theme = "light" | "dark";

interface ThemeSwitcherStore {
  currentTheme: Theme;
  init(): void;
  initButton(): void;
  toggleTheme(): void;
}

const ThemeSwitcher: ThemeSwitcherStore = {
  currentTheme: "light",

  init() {
    if (
      localStorage.theme === "dark" ||
      (typeof window.matchMedia !== "undefined" &&
        window.matchMedia("(prefers-color-scheme: dark)").matches &&
        localStorage.theme !== "light")
    ) {
      this.toggleTheme();
    }

    document.addEventListener("turbolinks:load", () => this.initButton());
  },

  initButton() {
    const themeSwitcher = document.getElementById("theme-switcher");

    themeSwitcher?.addEventListener("click", () => this.toggleTheme());
  },

  toggleTheme() {
    if (this.currentTheme === "light") {
      this.currentTheme = "dark";
      document.documentElement.classList.add("dark");
    } else {
      this.currentTheme = "light";
      document.documentElement.classList.remove("dark");
    }

    localStorage.setItem("theme", this.currentTheme);
  },
};

export { ThemeSwitcher as default };