import { createContext, useContext, useEffect, useState } from 'react'
type Theme = 'dark' | 'light' | 'system'
type ThemeProviderProps = {
children: React.ReactNode
defaultTheme?: Theme
storageKey?: string
}
type ThemeProviderState = {
theme: Theme
resolvedTheme: 'dark' | 'light'
setTheme: (theme: Theme) => void
}
const initialState: ThemeProviderState = {
theme: 'system',
resolvedTheme: 'dark',
setTheme: () => null,
}
const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
export function ThemeProvider({
children,
defaultTheme = 'dark',
storageKey = 'reticle-theme',
...props
}: ThemeProviderProps) {
const [theme, setTheme] = useState<Theme>(
() => (localStorage.getItem(storageKey) as Theme) || defaultTheme
)
// Compute resolved theme (what's actually applied)
const getResolvedTheme = (): 'dark' | 'light' => {
if (theme === 'system') {
return window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light'
}
return theme
}
const [resolvedTheme, setResolvedTheme] = useState<'dark' | 'light'>(getResolvedTheme)
useEffect(() => {
const root = window.document.documentElement
root.classList.remove('light', 'dark')
const resolved = getResolvedTheme()
root.classList.add(resolved)
setResolvedTheme(resolved)
// Listen for system theme changes
if (theme === 'system') {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
const handleChange = () => {
const newResolved = mediaQuery.matches ? 'dark' : 'light'
root.classList.remove('light', 'dark')
root.classList.add(newResolved)
setResolvedTheme(newResolved)
}
mediaQuery.addEventListener('change', handleChange)
return () => mediaQuery.removeEventListener('change', handleChange)
}
}, [theme])
const value = {
theme,
resolvedTheme,
setTheme: (theme: Theme) => {
localStorage.setItem(storageKey, theme)
setTheme(theme)
},
}
return (
<ThemeProviderContext.Provider {...props} value={value}>
{children}
</ThemeProviderContext.Provider>
)
}
export const useTheme = () => {
const context = useContext(ThemeProviderContext)
if (context === undefined)
throw new Error('useTheme must be used within a ThemeProvider')
return context
}
