27 lines
741 B
TypeScript
27 lines
741 B
TypeScript
import { useEffect, useState, ReactNode } from 'react'
|
|
import { ThemeContext, Theme } from './ThemeContextValue'
|
|
|
|
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>
|
|
)
|
|
}
|