fix: updated theme toggle

deriv-com · Mar 12, 2024 · 7748378 · 7748378
1 parent ae45ad8
commit 7748378
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 13 deletions.
diff --git a/lib/providers/theme/themeContext.tsx b/lib/providers/theme/themeContext.tsx
@@ -2,9 +2,14 @@ import React from "react";
 
 export type Theme = "dark" | "light";
 
-export const initialThemeState = {
-    theme: "light" as Theme,
-    toggleTheme: (() => null) as () => void,
+export type ThemeContextValue = {
+    theme: Theme;
+    toggleTheme: () => void;
 };
 
-export const ThemeContext = React.createContext(initialThemeState);
+export const ThemeContext = React.createContext<ThemeContextValue>({
+    theme: "light",
+    toggleTheme: () => {},
+});
+
+export default ThemeContext;
diff --git a/lib/providers/theme/themeProvider.tsx b/lib/providers/theme/themeProvider.tsx
@@ -26,15 +26,6 @@ export const ThemeProvider = ({ children, theme }: ThemeProviderProps) => {
         setCurrentTheme(theme);
     }, [selectedTheme, systemPrefersDark]);
 
-    useEffect(() => {
-        const root = document.documentElement;
-        if (currentTheme === "dark") {
-            root.classList.add("theme--dark");
-        } else {
-            root.classList.remove("theme--dark");
-        }
-    }, [currentTheme]);
-
     return (
         <ThemeContext.Provider value={{ theme: currentTheme, toggleTheme }}>
             <section className={`theme--${currentTheme}`}>{children}</section>