37 lines
976 B
TypeScript
37 lines
976 B
TypeScript
'use client';
|
|
|
|
import { createContext, useContext, useEffect, useState } from 'react';
|
|
|
|
type Theme = 'dark' | 'light';
|
|
|
|
const ThemeContext = createContext<{
|
|
theme: Theme;
|
|
toggle: () => void;
|
|
}>({ theme: 'dark', toggle: () => {} });
|
|
|
|
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
|
const [theme, setTheme] = useState<Theme>('dark');
|
|
|
|
useEffect(() => {
|
|
const stored = localStorage.getItem('theme') as Theme | null;
|
|
const initial = stored || 'dark';
|
|
setTheme(initial);
|
|
document.documentElement.setAttribute('data-theme', initial);
|
|
}, []);
|
|
|
|
const toggle = () => {
|
|
const next = theme === 'dark' ? 'light' : 'dark';
|
|
setTheme(next);
|
|
localStorage.setItem('theme', next);
|
|
document.documentElement.setAttribute('data-theme', next);
|
|
};
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ theme, toggle }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
}
|
|
|
|
export const useTheme = () => useContext(ThemeContext);
|