Merge pull request #24 from deriv-com/meenu-fix-toggle-issue

deriv-com · Mar 12, 2024 · 6dc6a46 · 6dc6a46
2 parents 05e83d0 + 7748378
commit 6dc6a46
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 15 deletions.
diff --git a/lib/providers/theme/themeContext.tsx b/lib/providers/theme/themeContext.tsx
@@ -1,13 +1,13 @@
-import { createContext } from "react";
+import React from "react";
 
 export type Theme = "dark" | "light";
 
 export type ThemeContextValue = {
     theme: Theme;
-    toggleTheme: (theme: Theme) => void;
+    toggleTheme: () => void;
 };
 
-export const ThemeContext = createContext<ThemeContextValue>({
+export const ThemeContext = React.createContext<ThemeContextValue>({
     theme: "light",
     toggleTheme: () => {},
 });

diff --git a/lib/providers/theme/themeProvider.tsx b/lib/providers/theme/themeProvider.tsx
@@ -15,8 +15,9 @@ export const ThemeProvider = ({ children, theme }: ThemeProviderProps) => {
 
     const systemPrefersDark = useMediaQuery("(prefers-color-scheme: dark)");
 
-    const toggleTheme = (updatedTheme: Theme) => {
-        setSelectedTheme(updatedTheme);
+    const toggleTheme = () => {
+        const newTheme = currentTheme === "dark" ? "light" : "dark";
+        setSelectedTheme(newTheme);
     };
 
     useEffect(() => {
@@ -25,18 +26,9 @@ 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 }}>
-            <div className={`theme--${currentTheme}`}>{children}</div>
+            <section className={`theme--${currentTheme}`}>{children}</section>
         </ThemeContext.Provider>
     );
 };