|
| 1 | +import React, { |
| 2 | + createContext, |
| 3 | + useContext, |
| 4 | + useEffect, |
| 5 | + useState, |
| 6 | + useCallback, |
| 7 | +} from 'react' |
| 8 | + |
| 9 | +export type Theme = 'light' | 'dark' | 'auto' |
| 10 | + |
| 11 | +interface ThemeContextType { |
| 12 | + theme: Theme |
| 13 | + actualTheme: 'light' | 'dark' |
| 14 | + setTheme: (theme: Theme) => void |
| 15 | +} |
| 16 | + |
| 17 | +const ThemeContext = createContext<ThemeContextType | undefined>(undefined) |
| 18 | + |
| 19 | +const THEME_STORAGE_KEY = 'comfy-registry-theme' |
| 20 | + |
| 21 | +export function ThemeProvider({ children }: { children: React.ReactNode }) { |
| 22 | + const [theme, setThemeState] = useState<Theme>('auto') |
| 23 | + const [actualTheme, setActualTheme] = useState<'light' | 'dark'>('dark') |
| 24 | + |
| 25 | + // Get system preference |
| 26 | + const getSystemTheme = (): 'light' | 'dark' => { |
| 27 | + if (typeof window === 'undefined') return 'dark' |
| 28 | + return window.matchMedia('(prefers-color-scheme: dark)').matches |
| 29 | + ? 'dark' |
| 30 | + : 'light' |
| 31 | + } |
| 32 | + |
| 33 | + // Calculate actual theme based on setting |
| 34 | + const calculateActualTheme = (themeValue: Theme): 'light' | 'dark' => { |
| 35 | + if (themeValue === 'auto') { |
| 36 | + return getSystemTheme() |
| 37 | + } |
| 38 | + return themeValue |
| 39 | + } |
| 40 | + |
| 41 | + // Load theme from localStorage on mount |
| 42 | + useEffect(() => { |
| 43 | + const savedTheme = localStorage.getItem(THEME_STORAGE_KEY) as Theme |
| 44 | + const initialTheme = savedTheme || 'auto' |
| 45 | + setThemeState(initialTheme) |
| 46 | + setActualTheme(calculateActualTheme(initialTheme)) |
| 47 | + }, [calculateActualTheme]) |
| 48 | + |
| 49 | + // Listen to system theme changes |
| 50 | + useEffect(() => { |
| 51 | + if (typeof window === 'undefined') return |
| 52 | + |
| 53 | + const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)') |
| 54 | + const handleChange = () => { |
| 55 | + if (theme === 'auto') { |
| 56 | + setActualTheme(getSystemTheme()) |
| 57 | + } |
| 58 | + } |
| 59 | + |
| 60 | + mediaQuery.addEventListener('change', handleChange) |
| 61 | + return () => mediaQuery.removeEventListener('change', handleChange) |
| 62 | + }, [theme]) |
| 63 | + |
| 64 | + // Update document class and actual theme when theme changes |
| 65 | + useEffect(() => { |
| 66 | + const newActualTheme = calculateActualTheme(theme) |
| 67 | + setActualTheme(newActualTheme) |
| 68 | + |
| 69 | + if (typeof document !== 'undefined') { |
| 70 | + document.documentElement.classList.remove('light', 'dark') |
| 71 | + document.documentElement.classList.add(newActualTheme) |
| 72 | + } |
| 73 | + }, [theme]) |
| 74 | + |
| 75 | + const setTheme = (newTheme: Theme) => { |
| 76 | + setThemeState(newTheme) |
| 77 | + localStorage.setItem(THEME_STORAGE_KEY, newTheme) |
| 78 | + } |
| 79 | + |
| 80 | + return ( |
| 81 | + <ThemeContext.Provider value={{ theme, actualTheme, setTheme }}> |
| 82 | + {children} |
| 83 | + </ThemeContext.Provider> |
| 84 | + ) |
| 85 | +} |
| 86 | + |
| 87 | +export function useTheme() { |
| 88 | + const context = useContext(ThemeContext) |
| 89 | + if (context === undefined) { |
| 90 | + throw new Error('useTheme must be used within a ThemeProvider') |
| 91 | + } |
| 92 | + return context |
| 93 | +} |
0 commit comments