33 lines
902 B
JavaScript
33 lines
902 B
JavaScript
import React, { createContext, useContext, useEffect, useState } from "react";
|
|
|
|
// Create the ThemeContext
|
|
const ThemeContext = createContext();
|
|
|
|
// Custom hook for consuming ThemeContext
|
|
export const useTheme = () => {
|
|
return useContext(ThemeContext);
|
|
};
|
|
|
|
const ThemeProvider = ({ children }) => {
|
|
const [colormode, setColormode] = useState(() => {
|
|
return localStorage.getItem("colormode") || "dark"; // Default to dark mode
|
|
});
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem("colormode", colormode);
|
|
document.documentElement.setAttribute("data-theme", colormode); // For global CSS styling
|
|
}, [colormode]);
|
|
|
|
const toggleColorMode = () => {
|
|
setColormode((prevMode) => (prevMode === "dark" ? "light" : "dark"));
|
|
};
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ colormode, toggleColorMode }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
};
|
|
|
|
export default ThemeProvider;
|