36 lines
880 B
TypeScript
36 lines
880 B
TypeScript
import {
|
|
createContext,
|
|
useContext,
|
|
useEffect,
|
|
useState,
|
|
type ReactNode,
|
|
} from 'react';
|
|
|
|
type ThemeMode = 'dark' | 'light';
|
|
const KEY = 'modern-sk-theme';
|
|
|
|
const ThemeContext = createContext<{
|
|
theme: ThemeMode;
|
|
setTheme: (t: ThemeMode) => void;
|
|
}>({ theme: 'dark', setTheme: () => {} });
|
|
|
|
export const useTheme = () => useContext(ThemeContext);
|
|
|
|
export const ThemeProvider = ({ children }: { children: ReactNode }) => {
|
|
const [theme, setTheme] = useState<ThemeMode>(() => {
|
|
if (typeof localStorage === 'undefined') return 'dark';
|
|
return (localStorage.getItem(KEY) as ThemeMode) || 'dark';
|
|
});
|
|
|
|
useEffect(() => {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
localStorage.setItem(KEY, theme);
|
|
}, [theme]);
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ theme, setTheme }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
};
|