Astro Installation

<script is:inline>
  const STORAGE_KEY = "tweakcn-theme";
  const DEFAULT_THEME = "default-dark";

  function getThemePreference() {
    if (typeof localStorage !== "undefined" && localStorage.getItem(STORAGE_KEY)) {
      return localStorage.getItem(STORAGE_KEY);
    }
    return DEFAULT_THEME;
  }

  function applyTheme(theme) {
    document.documentElement.setAttribute("data-theme", theme);
  }

  // Apply theme immediately
  const theme = getThemePreference();
  applyTheme(theme);

  // Listen for theme changes from React components
  if (typeof window !== "undefined") {
    window.setTheme = function(newTheme) {
      localStorage.setItem(STORAGE_KEY, newTheme);
      applyTheme(newTheme);
      window.dispatchEvent(new CustomEvent("theme-change", { detail: newTheme }));
    };
  }

  // Watch for storage changes (multi-tab sync)
  window.addEventListener("storage", (e) => {
    if (e.key === STORAGE_KEY && e.newValue) {
      applyTheme(e.newValue);
    }
  });
</script>

import * as React from "react";
import { Moon, Sun } from "lucide-react";
import { Button } from "@/components/ui/button";

const STORAGE_KEY = "tweakcn-theme";
const DEFAULT_THEME = "default-dark";

export function ModeToggle() {
  const [theme, setThemeState] = React.useState<string>(DEFAULT_THEME);

  React.useEffect(() => {
    // Get initial theme
    const currentTheme =
      document.documentElement.getAttribute("data-theme") ||
      localStorage.getItem(STORAGE_KEY) ||
      DEFAULT_THEME;
    setThemeState(currentTheme);

    // Listen for theme changes
    const handleThemeChange = (e: CustomEvent<string>) => {
      setThemeState(e.detail);
    };

    window.addEventListener("theme-change", handleThemeChange as EventListener);
    return () => {
      window.removeEventListener("theme-change", handleThemeChange as EventListener);
    };
  }, []);

  const setTheme = (newTheme: string) => {
    setThemeState(newTheme);
    if (typeof window !== "undefined" && window.setTheme) {
      window.setTheme(newTheme);
    }
  };

  const isDark = theme.endsWith("-dark");
  const colorTheme = theme.replace("-light", "").replace("-dark", "");

  return (
    <Button
      variant="outline"
      size="icon"
      onClick={() => setTheme(`${colorTheme}-${isDark ? "light" : "dark"}`)}
    >
      {isDark ? <Moon /> : <Sun />}
      <span className="sr-only">Toggle theme</span>
    </Button>
  );
}

window.addEventListener("storage", (e) => {
  if (e.key === STORAGE_KEY && e.newValue) {
    applyTheme(e.newValue);
  }
});