import { useCallback, useEffect, useState } from "react";
type themeType = "light" | "dark";
export default function useTheme() { const [theme, setTheme] = useState<themeType | null>(null);
const setCurrentTheme = useCallback( (theme: themeType = "light") => { if ( localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches) ) { document.documentElement.classList.add("dark"); } else { document.documentElement.classList.remove("dark"); } setTheme(theme); }, [theme, setTheme] );
const toggleTheme = useCallback( () => theme === "light" ? setCurrentTheme("dark") : setCurrentTheme("light"), [theme, setCurrentTheme] );
useEffect(() => { const currentTheme = localStorage.getItem("preferredTheme") as themeType; if (currentTheme) { setCurrentTheme(currentTheme); } else { if (window.matchMedia("(prefers-color-scheme: dark)").matches) { setCurrentTheme("dark"); } else { setCurrentTheme("light"); } } }, []);
return { theme, toggleTheme, setCurrentTheme, } as const;}