blob: 655d1b9901b486d196f7b4082c6257a8c1ddf0b6 (
plain) (
blame)
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
import { createContext, useContext, useState, useEffect } from 'react';
const ThemeContext = createContext();
export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
// Initialize theme from localStorage or system preference
useEffect(() => {
// Check if we're in a browser environment
if (typeof window !== 'undefined') {
const savedTheme = localStorage.getItem('theme');
// Use saved theme or system preference
if (savedTheme) {
setTheme(savedTheme);
document.documentElement.classList.toggle('dark', savedTheme === 'dark');
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
setTheme('dark');
document.documentElement.classList.add('dark');
}
}
}, []);
// Update theme in localStorage and toggle dark class
const updateTheme = (newTheme) => {
if (typeof window !== 'undefined') {
localStorage.setItem('theme', newTheme);
document.documentElement.classList.toggle('dark', newTheme === 'dark');
setTheme(newTheme);
}
};
// Toggle between light and dark theme
const toggleTheme = () => {
const newTheme = theme === 'light' ? 'dark' : 'light';
updateTheme(newTheme);
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
// Custom hook to use theme context
export const useTheme = () => {
const context = useContext(ThemeContext);
if (!context) {
throw new Error('useTheme must be used within a ThemeProvider');
}
return context;
};
|
