46 lines
981 B
JavaScript
46 lines
981 B
JavaScript
|
// ThemeContext.js
|
||
|
|
|
||
|
|
import React, { createContext, useContext, useState } from "react";
|
||
|
|
|
||
|
|
const ThemeContext = createContext();
|
||
|
|
|
||
|
|
export const lightTheme = {
|
||
|
|
primaryColor: "#007BFF",
|
||
|
|
secondaryColor: "#6C757D",
|
||
|
|
textColor: "#333333",
|
||
|
|
backgroundColor: "#FFFFFF",
|
||
|
|
};
|
||
|
|
|
||
|
|
export const darkTheme = {
|
||
|
|
primaryColor: "#00BFFF",
|
||
|
|
secondaryColor: "#B0B0B0",
|
||
|
|
textColor: "#FFFFFF",
|
||
|
|
backgroundColor: "#333333",
|
||
|
|
};
|
||
|
|
|
||
|
|
export const ThemeProvider = ({ children }) => {
|
||
|
|
const [isDarkMode, setIsDarkMode] = useState(false);
|
||
|
|
|
||
|
|
const toggleTheme = () => {
|
||
|
|
setIsDarkMode((prevMode) => !prevMode);
|
||
|
|
};
|
||
|
|
|
||
|
|
const setTheme = (darkTheme) => {
|
||
|
|
if (darkTheme != isDarkMode) {
|
||
|
|
setIsDarkMode(newTheme);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const theme = isDarkMode ? darkTheme : lightTheme;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ThemeContext.Provider value={{ theme, isDarkMode, toggleTheme, setTheme }}>
|
||
|
|
{children}
|
||
|
|
</ThemeContext.Provider>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export const useTheme = () => {
|
||
|
|
return useContext(ThemeContext);
|
||
|
|
};
|