diff options
Diffstat (limited to 'src/hooks')
| -rw-r--r-- | src/hooks/theme.tsx | 33 |
1 files changed, 33 insertions, 0 deletions
diff --git a/src/hooks/theme.tsx b/src/hooks/theme.tsx new file mode 100644 index 0000000..d65b18c --- /dev/null +++ b/src/hooks/theme.tsx @@ -0,0 +1,33 @@ +// hooks/theme.ts +import { useState, useEffect, useCallback } from 'react'; + +type Theme = 'light' | 'dark'; + +const STORAGE_KEY = 'theme'; + +export function useTheme() { + const [theme, setTheme] = useState<Theme>(() => { + const stored = typeof window !== 'undefined' ? localStorage.getItem(STORAGE_KEY) : null; + if (stored === 'light' || stored === 'dark') { + return stored; + } + + if (typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches) { + return 'dark'; + } + return 'light'; + }); + + useEffect(() => { + const root = document.documentElement; + root.setAttribute('data-theme', theme); + root.classList.toggle('dark', theme === 'dark'); + localStorage.setItem(STORAGE_KEY, theme); + }, [theme]); + + const toggleTheme = useCallback(() => { + setTheme(prev => (prev === 'dark' ? 'light' : 'dark')); + }, []); + + return { theme, toggleTheme }; +} |
