import { createEffect, createSignal, onCleanup, onMount } from "solid-js" import { MoonIcon, SunIcon } from "lucide-solid" import { getInitialTheme, STORAGE_KEY, Theme } from "../utils/theme.ts" export function ThemeSwitcher() { const [theme, setTheme] = createSignal(getInitialTheme()) // Reactively apply the theme to and persist to localStorage createEffect(() => { const current = theme() document.documentElement.dataset.theme = current localStorage.setItem(STORAGE_KEY, current) }) // Listen for system preference changes when no explicit choice is stored onMount(() => { const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)") const handleChange = (e: MediaQueryListEvent) => { if (!localStorage.getItem(STORAGE_KEY)) { setTheme(e.matches ? "dark" : "light") } } mediaQuery.addEventListener("change", handleChange) onCleanup(() => mediaQuery.removeEventListener("change", handleChange)) }) const toggleTheme = () => { setTheme((prev) => (prev === "light" ? "dark" : "light")) } return ( ) }