mm

packages/ui/src/common/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,32 @@
+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>
+  );
+};