From ae45ad85a4112e1ede14a4c1be3dd2149c06b85b Mon Sep 17 00:00:00 2001
From: meenu-deriv <meenakshi@regentmarkets.com>
Date: Tue, 12 Mar 2024 12:47:52 +0400
Subject: [PATCH 1/2] fix: toggle update

---
 lib/providers/theme/themeContext.tsx  | 15 +++++----------
 lib/providers/theme/themeProvider.tsx |  7 ++++---
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/lib/providers/theme/themeContext.tsx b/lib/providers/theme/themeContext.tsx
index d8795c22..6c09cf1c 100644
--- a/lib/providers/theme/themeContext.tsx
+++ b/lib/providers/theme/themeContext.tsx
@@ -1,15 +1,10 @@
-import { createContext } from "react";
+import React from "react";
 
 export type Theme = "dark" | "light";
 
-export type ThemeContextValue = {
-    theme: Theme;
-    toggleTheme: (theme: Theme) => void;
+export const initialThemeState = {
+    theme: "light" as Theme,
+    toggleTheme: (() => null) as () => void,
 };
 
-export const ThemeContext = createContext<ThemeContextValue>({
-    theme: "light",
-    toggleTheme: () => {},
-});
-
-export default ThemeContext;
+export const ThemeContext = React.createContext(initialThemeState);
diff --git a/lib/providers/theme/themeProvider.tsx b/lib/providers/theme/themeProvider.tsx
index 2f5b71c5..2ff3c3a3 100644
--- 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(() => {
@@ -36,7 +37,7 @@ export const ThemeProvider = ({ children, theme }: ThemeProviderProps) => {
 
     return (
         <ThemeContext.Provider value={{ theme: currentTheme, toggleTheme }}>
-            <div className={`theme--${currentTheme}`}>{children}</div>
+            <section className={`theme--${currentTheme}`}>{children}</section>
         </ThemeContext.Provider>
     );
 };

From 774837839d18e264c069cf5dcb22651501d87242 Mon Sep 17 00:00:00 2001
From: meenu-deriv <meenakshi@regentmarkets.com>
Date: Tue, 12 Mar 2024 13:00:54 +0400
Subject: [PATCH 2/2] fix: updated theme toggle

---
 lib/providers/theme/themeContext.tsx  | 13 +++++++++----
 lib/providers/theme/themeProvider.tsx |  9 ---------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/lib/providers/theme/themeContext.tsx b/lib/providers/theme/themeContext.tsx
index 6c09cf1c..c74520fc 100644
--- 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
index 2ff3c3a3..f214d6ba 100644
--- 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>