37 lines
833 B
TypeScript
37 lines
833 B
TypeScript
import React, { createContext, ReactElement, useEffect, useState } from "react";
|
|
|
|
type Theme = "light" | "dark";
|
|
|
|
const ThemeContext = createContext<{
|
|
theme: Theme;
|
|
setTheme(newTheme: Theme): void;
|
|
}>({
|
|
theme: "light",
|
|
setTheme: () => {
|
|
throw new Error("Use ThemeProvider instead.");
|
|
},
|
|
});
|
|
|
|
interface Props {
|
|
theme: Theme;
|
|
children?: ReactElement;
|
|
}
|
|
|
|
export function ThemeProvider({ children, theme }: Props) {
|
|
const [currentTheme, setTheme] = useState(theme);
|
|
|
|
useEffect(() => {
|
|
if (currentTheme === "light") {
|
|
document.body.classList.remove("dark");
|
|
} else if (currentTheme === "dark") {
|
|
document.body.classList.add("dark");
|
|
}
|
|
}, [currentTheme]);
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ theme: currentTheme, setTheme }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
}
|