re-add theming to provider

covalenthq · Dec 5, 2023 · dcb5930 · dcb5930
1 parent e981a93
commit dcb5930
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 1 deletion.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,7 +1,6 @@
 import "../src/tailwind-output.css";
 import { themes } from "@storybook/theming";
 import { CovalentProvider } from "../src/utils/store/Covalent";
-import { ChainsProvider } from "../src/utils/store/Chains";
 // import { useDarkMode } from 'storybook-dark-mode' // uncomment out this one line for dark mode
 
 export const parameters = {

diff --git a/src/utils/store/Covalent.tsx b/src/utils/store/Covalent.tsx
@@ -2,6 +2,7 @@ import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { CovalentClient } from "@covalenthq/client-sdk";
 import { type ChainItem } from "@covalenthq/client-sdk";
 import { Toaster } from "@/components/ui/toaster";
+import { updateTheme } from "../functions";
 
 interface CovalentContextType {
     covalentClient: CovalentClient;
@@ -11,6 +12,28 @@ interface CovalentContextType {
 interface CovalentProviderProps {
     children: React.ReactNode;
     apikey: string;
+    mode?: "dark" | "light";
+    theme?: "classic" | "neo";
+    border_radius?: "none" | "small" | "medium" | "large" | "full";
+    color?:
+        | "slate"
+        | "stone"
+        | "red"
+        | "orange"
+        | "amber"
+        | "yellow"
+        | "lime"
+        | "green"
+        | "emerald"
+        | "cyan"
+        | "sky"
+        | "blue"
+        | "indigo"
+        | "violet"
+        | "purple"
+        | "fuchsia"
+        | "pink"
+        | "rose";
 }
 
 const CovalentContext = createContext<CovalentContextType>(
@@ -20,13 +43,112 @@ const CovalentContext = createContext<CovalentContextType>(
 export const CovalentProvider: React.FC<CovalentProviderProps> = ({
     children,
     apikey,
+    mode = "light",
+    theme = "classic",
+    color = "slate",
+    border_radius = "medium",
 }) => {
     const covalentClient = useMemo<CovalentClient>(
         () => new CovalentClient(apikey),
         [apikey]
     );
     const [chains, setChains] = useState<ChainItem[] | null>(null);
 
+    function changeOnlyColor(accentcolor: string, border_radius: string) {
+        if (typeof document !== "undefined") {
+            const theme = {
+                accentcolor: accentcolor,
+                borderradius: border_radius,
+            };
+            updateTheme(theme);
+        }
+    }
+
+    function changeMode(mode: "dark" | "light") {
+        if (typeof document !== "undefined") {
+            const body = document.body;
+            const root = document.documentElement;
+
+            if (mode === "dark") {
+                body.classList.add("dark");
+                root.classList.add("dark");
+                return;
+            }
+            body.classList.remove("dark");
+            root.classList.remove("dark");
+        }
+    }
+
+    function changeToNeo() {
+        if (typeof document !== "undefined") {
+            const theme = {
+                backgroundColor: {
+                    light: "#eff6ff",
+                    dark: "#1d4ed8",
+                },
+                borderColor: {
+                    light: "#bfdbfe",
+                    dark: "#1e40af",
+                },
+                secondary: {
+                    light: "#64748b",
+                },
+                surfaceColor: {
+                    light: "#bfdbfe",
+                    dark: "#bfdbfe",
+                },
+                secondaryColor: {
+                    light: "#64748b",
+                    dark: "#64748b",
+                },
+            };
+            updateTheme(theme);
+            const body = document.body;
+            body.classList.add("neo");
+        }
+    }
+
+    function changeToClassic() {
+        if (typeof document !== "undefined") {
+            const theme = {
+                backgroundColor: {
+                    light: "#ffffff",
+                    dark: "#030711",
+                },
+                borderColor: {
+                    light: "#e5e7eb",
+                    dark: "#1f2937",
+                },
+                surfaceColor: {
+                    light: "#e5e7eb",
+                    dark: "#e5e7eb",
+                },
+                secondaryColor: {
+                    light: "#94a3b8",
+                    dark: "#94a3b8",
+                },
+            };
+            updateTheme(theme);
+            const body = document.body;
+            body.classList.remove("neo");
+        }
+    }
+    if (typeof document !== "undefined") {
+        changeOnlyColor(color, border_radius);
+        changeMode(mode);
+        switch (theme) {
+            case "classic":
+                changeToClassic();
+                break;
+            case "neo":
+                changeToNeo();
+                break;
+            default:
+                changeToClassic();
+                break;
+        }
+    }
+
     useEffect(() => {
         (async () => {
             try {