49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import {
|
|
createContext,
|
|
useContext,
|
|
useState,
|
|
useEffect,
|
|
type ReactNode,
|
|
} from "react";
|
|
|
|
interface ThemeContextValue {
|
|
theme: string;
|
|
toggleTheme: () => void;
|
|
}
|
|
|
|
const ThemeContext = createContext<ThemeContextValue | null>(null);
|
|
|
|
export function ThemeProvider({ children }: { children: ReactNode }) {
|
|
const [theme, setTheme] = useState(() => {
|
|
if (typeof window !== "undefined") {
|
|
return localStorage.getItem("boha-theme") || "dark";
|
|
}
|
|
return "dark";
|
|
});
|
|
|
|
useEffect(() => {
|
|
document.documentElement.setAttribute("data-theme", theme);
|
|
localStorage.setItem("boha-theme", theme);
|
|
const themeColor = theme === "dark" ? "#12121a" : "#ffffff";
|
|
document
|
|
.querySelector('meta[name="theme-color"]')
|
|
?.setAttribute("content", themeColor);
|
|
}, [theme]);
|
|
|
|
const toggleTheme = () => {
|
|
setTheme((prev) => (prev === "dark" ? "light" : "dark"));
|
|
};
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ theme, toggleTheme }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useTheme(): ThemeContextValue {
|
|
const context = useContext(ThemeContext);
|
|
if (!context) throw new Error("useTheme must be used within a ThemeProvider");
|
|
return context;
|
|
}
|