50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
import { normalTheme, Theme } from "./themes";
|
|
import {
|
|
createContext,
|
|
ReactNode,
|
|
useContext,
|
|
useEffect,
|
|
useState,
|
|
} from "react";
|
|
|
|
interface ThemeContextProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
interface ThemeContextValue {
|
|
theme: Theme;
|
|
setTheme: (theme: Theme) => void;
|
|
}
|
|
|
|
const themeContext = createContext<ThemeContextValue>({
|
|
theme: normalTheme,
|
|
setTheme: () => {},
|
|
});
|
|
|
|
const ThemeProvider = ({ children }: ThemeContextProps) => {
|
|
const [theme, setTheme] = useState(normalTheme);
|
|
useEffect(() => {
|
|
if (theme.backgroundColor) {
|
|
document.body.style.backgroundColor = theme.backgroundColor;
|
|
document.body.style.backgroundImage = "unset";
|
|
} else if (theme.backgroundImage) {
|
|
document.body.style.backgroundColor = "unset";
|
|
document.body.style.backgroundImage = theme.backgroundImage;
|
|
}
|
|
document.body.style.color = theme.textColor;
|
|
document.body.style.borderColor = theme.textColor;
|
|
}, [theme]);
|
|
|
|
return (
|
|
<themeContext.Provider value={{ theme, setTheme }}>
|
|
{children}
|
|
</themeContext.Provider>
|
|
);
|
|
};
|
|
|
|
function useTheme() {
|
|
return useContext(themeContext);
|
|
}
|
|
|
|
export { ThemeProvider, useTheme };
|