113 lines
3.0 KiB
TypeScript
113 lines
3.0 KiB
TypeScript
'use client'
|
|
|
|
import { createContext, useContext, useEffect, useState } from 'react'
|
|
|
|
type Theme = 'light' | 'dark' | 'system'
|
|
|
|
interface ThemeContextType {
|
|
theme: Theme
|
|
setTheme: (theme: Theme) => void
|
|
resolvedTheme: 'light' | 'dark'
|
|
}
|
|
|
|
const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
|
|
|
|
export function useTheme() {
|
|
const context = useContext(ThemeContext)
|
|
if (context === undefined) {
|
|
throw new Error('useTheme must be used within a ThemeProvider')
|
|
}
|
|
return context
|
|
}
|
|
|
|
interface ThemeProviderProps {
|
|
children: React.ReactNode
|
|
defaultTheme?: Theme
|
|
storageKey?: string
|
|
}
|
|
|
|
export function ThemeProvider({
|
|
children,
|
|
defaultTheme = 'system',
|
|
storageKey = 'prmbr-theme',
|
|
}: ThemeProviderProps) {
|
|
const [theme, setThemeState] = useState<Theme>(defaultTheme)
|
|
const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('light')
|
|
|
|
// Initialize theme from localStorage or default
|
|
useEffect(() => {
|
|
try {
|
|
const stored = localStorage.getItem(storageKey) as Theme
|
|
if (stored && ['light', 'dark', 'system'].includes(stored)) {
|
|
setThemeState(stored)
|
|
}
|
|
} catch (error) {
|
|
console.warn('Failed to load theme from localStorage:', error)
|
|
}
|
|
}, [storageKey])
|
|
|
|
// Update resolved theme based on current theme and system preference
|
|
useEffect(() => {
|
|
const updateResolvedTheme = () => {
|
|
if (theme === 'system') {
|
|
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
|
setResolvedTheme(systemTheme)
|
|
} else {
|
|
setResolvedTheme(theme)
|
|
}
|
|
}
|
|
|
|
updateResolvedTheme()
|
|
|
|
// Listen for system theme changes
|
|
if (theme === 'system') {
|
|
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
|
|
const handleChange = () => updateResolvedTheme()
|
|
|
|
mediaQuery.addEventListener('change', handleChange)
|
|
return () => mediaQuery.removeEventListener('change', handleChange)
|
|
}
|
|
}, [theme])
|
|
|
|
// Apply theme to document
|
|
useEffect(() => {
|
|
const root = document.documentElement
|
|
|
|
// Remove existing theme classes
|
|
root.classList.remove('light', 'dark')
|
|
|
|
// Add resolved theme class
|
|
root.classList.add(resolvedTheme)
|
|
|
|
// Set color-scheme for native browser elements
|
|
root.style.colorScheme = resolvedTheme
|
|
|
|
// Update meta theme-color for mobile browsers
|
|
const metaThemeColor = document.querySelector('meta[name="theme-color"]')
|
|
if (metaThemeColor) {
|
|
metaThemeColor.setAttribute('content', resolvedTheme === 'dark' ? '#020617' : '#ffffff')
|
|
}
|
|
}, [resolvedTheme])
|
|
|
|
const setTheme = (newTheme: Theme) => {
|
|
try {
|
|
localStorage.setItem(storageKey, newTheme)
|
|
setThemeState(newTheme)
|
|
} catch (error) {
|
|
console.warn('Failed to save theme to localStorage:', error)
|
|
setThemeState(newTheme)
|
|
}
|
|
}
|
|
|
|
const value = {
|
|
theme,
|
|
setTheme,
|
|
resolvedTheme,
|
|
}
|
|
|
|
return (
|
|
<ThemeContext.Provider value={value}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
)
|
|
} |