43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import { createContext, useContext, useEffect, useState, ReactNode } from 'react'
|
|
|
|
type Theme = 'dark' | 'light'
|
|
|
|
interface ThemeContextType {
|
|
theme: Theme
|
|
toggleTheme: () => void
|
|
}
|
|
|
|
const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
|
|
|
|
export function ThemeProvider({ children }: { children: ReactNode }) {
|
|
const [theme, setTheme] = useState<Theme>(() => {
|
|
const saved = localStorage.getItem('theme')
|
|
return (saved as Theme) || 'dark'
|
|
})
|
|
|
|
useEffect(() => {
|
|
const root = window.document.documentElement
|
|
root.classList.remove('light', 'dark')
|
|
root.classList.add(theme)
|
|
localStorage.setItem('theme', theme)
|
|
}, [theme])
|
|
|
|
const toggleTheme = () => {
|
|
setTheme(prev => prev === 'dark' ? 'light' : 'dark')
|
|
}
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ theme, toggleTheme }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
)
|
|
}
|
|
|
|
export function useTheme() {
|
|
const context = useContext(ThemeContext)
|
|
if (context === undefined) {
|
|
throw new Error('useTheme must be used within a ThemeProvider')
|
|
}
|
|
return context
|
|
}
|