blob: d65b18c69ee691529ff5ea29983a504e9cc2e257 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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 };
}
|
