halo-theme/src/alpine/themeMode.ts

interface ThemeModeState {
  init(): void;
  storedTheme: string;
  handleToggleThemeMode(): void;
}

export const themeMode =  ():ThemeModeState => ({
  storedTheme: '',

  init() {
    const storedTheme = localStorage.getItem("theme-mode") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");

    if (!storedTheme) return;

    document.documentElement.setAttribute("data-color-scheme", storedTheme);
    
    this.storedTheme = storedTheme;
  },

  handleToggleThemeMode() {
    const targetTheme = this.storedTheme === "dark" ? "light" : "dark";

    document.documentElement.setAttribute("data-color-scheme", targetTheme);
    
    this.storedTheme = targetTheme;

    localStorage.setItem("theme-mode", targetTheme);
  },
});