import React, { createContext, useState, useEffect, useContext } from 'react';
interface DarkModeContextProps {
darkMode: boolean;
setDarkMode: (mode: boolean) => void;
}
const DarkModeContext = createContext<DarkModeContextProps | undefined>(undefined);
interface DarkModeProviderProps {
children: React.ReactNode;
}
const DarkModeProvider: React.FC<DarkModeProviderProps> = ({ children }) => {
const initialMode = localStorage.getItem('darkMode') === 'true';
const [darkMode, setDarkMode] = useState(initialMode);
useEffect(() => {
localStorage.setItem('darkMode', darkMode.toString());
}, [darkMode]);
const contextValue: DarkModeContextProps = {
darkMode,
setDarkMode: (mode) => setDarkMode(mode),
};
return (
<DarkModeContext.Provider value={contextValue}>
{children}
</DarkModeContext.Provider>
);
};
export const useDarkMode = (): DarkModeContextProps => {
const context = useContext(DarkModeContext);
if (!context) {
throw new Error('useDarkMode must be used within a DarkModeProvider');
}
return context;
};
export default DarkModeProvider;