33 lines
860 B
TypeScript
33 lines
860 B
TypeScript
import { useState, type ReactNode } from "react";
|
|
import { type Theme, ThemeContext } from "./ThemeContext";
|
|
import { cn } from "tailwind-variants";
|
|
|
|
type ThemeProviderProps = {
|
|
children?: ReactNode;
|
|
defaultTheme?: Theme;
|
|
};
|
|
|
|
export const ThemeProvider = ({
|
|
children,
|
|
defaultTheme,
|
|
}: ThemeProviderProps) => {
|
|
const [theme, setTheme] = useState<Theme>(defaultTheme || "light");
|
|
const toggleTheme = () => setTheme(theme === "light" ? "dark" : "light");
|
|
|
|
const frameworkClass = "dg";
|
|
const themeClass = cn(frameworkClass, theme);
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ theme, toggleTheme, themeClass }}>
|
|
<div
|
|
className={"dg-theme-provider"}
|
|
style={
|
|
theme == "light" ? { background: "white" } : { background: "black" }
|
|
}
|
|
>
|
|
{children}
|
|
</div>
|
|
</ThemeContext.Provider>
|
|
);
|
|
};
|