Mayur Shinde
35 lines
1.0 KiB
React
35 lines
1.0 KiB
React
import React, { createContext, useContext, useEffect, useState } from 'react';
|
|
|
|
const ThemeContext = createContext();
|
|
|
|
export const ThemeProvider = ({ children }) => {
|
|
const [theme, setTheme] = useState(() => {
|
|
if (typeof window !== 'undefined') {
|
|
const savedTheme = localStorage.getItem('theme');
|
|
if (savedTheme) {
|
|
return savedTheme;
|
|
}
|
|
}
|
|
return 'dark'; // Default to dark for first-time visitors
|
|
});
|
|
|
|
useEffect(() => {
|
|
const root = window.document.documentElement;
|
|
root.classList.remove('light', 'dark');
|
|
root.classList.add(theme);
|
|
localStorage.setItem('theme', theme);
|
|
}, [theme]);
|
|
|
|
const toggleTheme = () => {
|
|
setTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'));
|
|
};
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ theme, toggleTheme }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
};
|
|
|
|
export const useTheme = () => useContext(ThemeContext);
|