"use client"; import { createContext, useContext, useEffect, useState } from "react"; type Theme = "light" | "dark"; const ThemeContext = createContext<{ theme: Theme; toggle: () => void;}>({ theme: "light", toggle: () => {},}); export function ThemeProvider({ children }: { children: React.ReactNode }) { const [theme, setTheme] = useState<Theme>("light"); useEffect(() => { const stored = localStorage.getItem("sumtex-theme") as Theme | null; const preferred = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; const initial = stored || preferred; setTheme(initial); document.documentElement.classList.toggle("dark", initial === "dark"); }, []); const toggle = () => { const next = theme === "light" ? "dark" : "light"; setTheme(next); localStorage.setItem("sumtex-theme", next); document.documentElement.classList.toggle("dark", next === "dark"); }; return ( <ThemeContext.Provider value={{ theme, toggle }}> {children} </ThemeContext.Provider> );} export function useTheme() { return useContext(ThemeContext);}
"use client";
import { createContext, useContext, useEffect, useState } from "react";
type Theme = "light" | "dark";
const ThemeContext = createContext<{
theme: Theme;
toggle: () => void;
}>({
theme: "light",
toggle: () => {},
});
export function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<Theme>("light");
useEffect(() => {
const stored = localStorage.getItem("sumtex-theme") as Theme | null;
const preferred = window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
const initial = stored || preferred;
setTheme(initial);
document.documentElement.classList.toggle("dark", initial === "dark");
}, []);
const toggle = () => {
const next = theme === "light" ? "dark" : "light";
setTheme(next);
localStorage.setItem("sumtex-theme", next);
document.documentElement.classList.toggle("dark", next === "dark");
};
return (
<ThemeContext.Provider value={{ theme, toggle }}>
{children}
</ThemeContext.Provider>
);
}
export function useTheme() {
return useContext(ThemeContext);
}