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 56 57 58 59 60 61 62 63 64 65 | 6x 6x 45x 45x 37x 37x 37x 30x 7x 45x 43x 43x 43x 39x 39x 4x 4x 43x 43x 45x 5x 45x 6x 55x 55x 55x | import React, { createContext, useState, useEffect, useContext } from 'react';
type Theme = 'dark' | 'light';
interface ThemeContextType {
theme: Theme;
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
// Default to dark theme, but check localStorage if available
const [theme, setTheme] = useState<Theme>('dark');
useEffect(() => {
// Initialize theme from localStorage if available
Eif (typeof window !== 'undefined') {
const savedTheme = localStorage.getItem('neoRustTheme') as Theme | null;
if (savedTheme) {
setTheme(savedTheme);
} else Iif (typeof window.matchMedia === 'function' && window.matchMedia('(prefers-color-scheme: light)').matches) {
setTheme('light');
}
}
}, []);
useEffect(() => {
// Apply theme to document when it changes
Eif (typeof document !== 'undefined') {
const root = document.documentElement;
if (theme === 'dark') {
root.classList.add('dark');
root.classList.remove('light');
} else {
root.classList.add('light');
root.classList.remove('dark');
}
// Save to localStorage
Eif (typeof window !== 'undefined') {
localStorage.setItem('neoRustTheme', theme);
}
}
}, [theme]);
const toggleTheme = () => {
setTheme(prevTheme => (prevTheme === 'dark' ? 'light' : 'dark'));
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
export const useTheme = (): ThemeContextType => {
const context = useContext(ThemeContext);
Iif (context === undefined) {
throw new Error('useTheme must be used within a ThemeProvider');
}
return context;
}; |