Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 55 | /**
* @fileoverview Theme Context for Dark/Light mode
* @description Provides theme switching functionality
* @module context/ThemeContext
*/
import { createContext, useContext, useState, useEffect } from 'react';
const ThemeContext = createContext();
/**
* Theme Provider Component
*/
export function ThemeProvider({ children }) {
const [theme, setTheme] = useState(() => {
// Check localStorage first
const saved = localStorage.getItem('md-theme');
if (saved) return saved;
// Check system preference
if (window.matchMedia('(prefers-color-scheme: light)').matches) {
return 'light';
}
return 'dark';
});
useEffect(() => {
// Apply theme to document
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('md-theme', theme);
}, [theme]);
const toggleTheme = () => {
setTheme(prev => prev === 'dark' ? 'light' : 'dark');
};
return (
<ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
/**
* Hook to use theme
*/
export function useTheme() {
const context = useContext(ThemeContext);
if (!context) {
throw new Error('useTheme must be used within a ThemeProvider');
}
return context;
}
export default ThemeProvider;
|