File size: 2,109 Bytes
e9d5b7d | 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 66 67 68 69 70 71 72 73 74 75 76 |
"use client";
import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
type Theme = 'light' | 'dark';
interface ThemeProviderProps {
children: ReactNode;
defaultTheme?: Theme;
storageKey?: string;
}
interface ThemeProviderState {
theme: Theme;
setTheme: (theme: Theme) => void;
}
const initialState: ThemeProviderState = {
theme: 'light', // Default to light if no specific default is provided or found
setTheme: () => null,
};
const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
export function ThemeProvider({
children,
defaultTheme = 'light',
storageKey = 'anita-deploy-ui-theme', // Specific storage key
}: ThemeProviderProps) {
const [theme, setTheme] = useState<Theme>(() => {
if (typeof window !== 'undefined') {
const storedTheme = localStorage.getItem(storageKey) as Theme | null;
if (storedTheme && (storedTheme === 'light' || storedTheme === 'dark')) {
return storedTheme;
}
// No valid theme in localStorage, check for system preference if defaultTheme is 'system'
// For simplicity now, we'll just use the passed defaultTheme or 'light'
// if (defaultTheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// return 'dark';
// }
}
return defaultTheme === 'dark' ? 'dark' : 'light'; // Ensure a valid theme
});
useEffect(() => {
if (typeof window === 'undefined') return;
const root = window.document.documentElement;
root.classList.remove('light', 'dark');
root.classList.add(theme);
localStorage.setItem(storageKey, theme);
}, [theme, storageKey]);
const value = {
theme,
setTheme: (newTheme: Theme) => {
setTheme(newTheme);
},
};
return (
<ThemeProviderContext.Provider value={value}>
{children}
</ThemeProviderContext.Provider>
);
}
export const useTheme = () => {
const context = useContext(ThemeProviderContext);
if (context === undefined) {
throw new Error('useTheme must be used within a ThemeProvider');
}
return context;
};
|