Fixed : The Toggle button Error While click in Two times

src/sections/General/Navigation/utility/ScrollspyMenu.js

@@ -15,14 +15,14 @@ import { useInView } from "react-intersection-observer";
 import { useStyledDarkMode } from "../../../../theme/app/useStyledDarkMode";
 
 const ScrollspyMenu = ({ menuItems, ...props }) => {
-  const { blogData,className } = props;
+  const { blogData, className } = props;
+  const { isDark } = useStyledDarkMode();
 
   const addAllClasses = className ? [className] : [""];
-  const [activeState,setActiveState] = useState(null);
+  const [activeState, setActiveState] = useState(null);
 
-  const [isWrapVisible,setIsWrapperVisible] = useState(false);
+  const [isWrapVisible, setIsWrapperVisible] = useState(false);
   const [imageInView, setimageInView] = useState(false);
-  const { isDark } = useStyledDarkMode();
 
   const handleMouseOver = (index) => {
     setActiveState(menuItems[index]);
@@ -45,17 +45,16 @@ const ScrollspyMenu = ({ menuItems, ...props }) => {
   const [transitionRef, inView] = useInView({ threshold: 0.7 });
 
   useEffect(() => {
-    if (inView && !imageInView){
+    if (inView && !imageInView) {
       setimageInView(true);
-    } else if (imageInView && !inView){
+    } else if (imageInView && !inView) {
       setimageInView(false);
     }
-  },[inView,imageInView]);
+  }, [inView, imageInView]);
 
   return (
     <ul className={addAllClasses.join(" ")} onMouseEnter={wrapDisplay} onMouseLeave={wrapNone}>
       {menuItems.map((menu, index) => (
-
         <li
           key={index}
           className={
@@ -159,7 +158,7 @@ const ScrollspyMenu = ({ menuItems, ...props }) => {
                       <div className="transition-container" ref={transitionRef}>
                         <img className="canvas" src={isDark ? EmptyDark : EmptyLight} alt="" />
                         <ServiceIntefaceImage className="service-interface" alt="ServiceIntefaceImage" />
-                        <IngressGatewayImage alt="IngressGatewayImage" className={imageInView ? "ingress-gateway-transition ingress-gateway" : "ingress-gateway"}/>
+                        <IngressGatewayImage alt="IngressGatewayImage" className={imageInView ? "ingress-gateway-transition ingress-gateway" : "ingress-gateway"} />
                         {isDark ? <KubernetesImage className={imageInView ? "kubernetes-transition kubernetes" : "kubernetes"} alt="KubernetesImage" /> : <KubernetesImage1 className={imageInView ? "kubernetes-transition kubernetes" : "kubernetes"} alt="KubernetesImage" />}
                         <PodImage className={imageInView ? "pod-transition pod" : "pod"} alt="PodImage" />
                         <PrometheusImage className={imageInView ? "prometheus-transition prometheus" : "prometheus"} alt="PrometheusImage" />

src/theme/app/ThemeManager.js

@@ -2,7 +2,7 @@
 
 //context provider for app to make accessible theme setting, toggle function, etc.
 
-import React, { createContext, useState, useEffect } from "react";
+import React, { createContext, useState, useEffect, useCallback } from "react";
 
 export const ThemeSetting = {
   LIGHT: "light",
@@ -28,10 +28,15 @@ const isBrowser = typeof window !== "undefined";
 const systemDarkModeSetting = () =>
   isBrowser && window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
 const isDarkModeActive = () => {
-  // Assume that dark mode is not active if there's no system dark mode setting available
   return !!systemDarkModeSetting()?.matches;
 };
 
+const applyThemeToDOM = (theme) => {
+  if (!isBrowser) return;
+  const root = window.document.documentElement;
+  root.style.setProperty("--initial-color-mode", theme);
+  root.setAttribute("data-theme", theme);
+};
 
 export const ThemeManagerProvider = (props) => {
   const [themeSetting, setThemeSetting] = useState(ThemeSetting.SYSTEM);
@@ -42,49 +47,100 @@ export const ThemeManagerProvider = (props) => {
     if (!isBrowser) return;
 
     const root = window.document.documentElement;
-    const initialColorValue = root.style.getPropertyValue(
-      "--initial-color-mode"
-    );
-    setIsDark(initialColorValue === ThemeSetting.DARK);
+    const initialColorValue = root.style.getPropertyValue("--initial-color-mode");
+
+    // Get stored theme from localStorage
+    const storedTheme = localStorage.getItem(DarkThemeKey);
+
+    if (storedTheme && storedTheme !== ThemeSetting.SYSTEM) {
+      const isDarkTheme = storedTheme === ThemeSetting.DARK;
+      setIsDark(isDarkTheme);
+      setThemeSetting(storedTheme);
+      applyThemeToDOM(storedTheme);
+    } else if (initialColorValue) {
+      setIsDark(initialColorValue === ThemeSetting.DARK);
+      setThemeSetting(ThemeSetting.SYSTEM);
+    } else {
+      // Fallback to system preference
+      const systemIsDark = isDarkModeActive();
+      setIsDark(systemIsDark);
+      const theme = systemIsDark ? ThemeSetting.DARK : ThemeSetting.LIGHT;
+      applyThemeToDOM(theme);
+    }
+
     setDidLoad(true);
+  }, []);
+
+  // Listen to system color scheme changes only when on SYSTEM mode
+  useEffect(() => {
+    if (!isBrowser || themeSetting !== ThemeSetting.SYSTEM) return;
 
-    // Add listener for system color scheme changes
     const darkModeMediaQuery = systemDarkModeSetting();
-    if (darkModeMediaQuery && themeSetting === ThemeSetting.SYSTEM) {
-      const handleChange = (e) => {
-        setIsDark(e.matches);
-      };
-      darkModeMediaQuery.addEventListener("change", handleChange);
-      return () => darkModeMediaQuery.removeEventListener("change", handleChange);
-    }
+    if (!darkModeMediaQuery) return;
+
+    const handleChange = (e) => {
+      setIsDark(e.matches);
+      applyThemeToDOM(e.matches ? ThemeSetting.DARK : ThemeSetting.LIGHT);
+    };
+
+    darkModeMediaQuery.addEventListener("change", handleChange);
+    return () => darkModeMediaQuery.removeEventListener("change", handleChange);
   }, [themeSetting]);
 
-  const toggleDark = (value) => {
+  const toggleDark = useCallback(() => {
     if (!isBrowser) return;
 
-    const newIsDark = value ?? !isDark;
-    const theme = newIsDark ? ThemeSetting.DARK : ThemeSetting.LIGHT;
+    const newIsDark = !isDark;
+    const newTheme = newIsDark ? ThemeSetting.DARK : ThemeSetting.LIGHT;
+
+    // Update state
     setIsDark(newIsDark);
-    setThemeSetting(theme);
-    localStorage.setItem(DarkThemeKey, theme);
-  };
+    setThemeSetting(newTheme);
+
+    // Apply to DOM immediately
+    applyThemeToDOM(newTheme);
+
+    // Persist to localStorage
+    localStorage.setItem(DarkThemeKey, newTheme);
+  }, [isDark]);
+
+  const changeThemeSetting = useCallback(
+    (setting) => {
+      if (!isBrowser) return;
+
+      let newIsDark = isDark;
+      let themeToApply = setting;
+
+      switch (setting) {
+        case ThemeSetting.SYSTEM: {
+          newIsDark = isDarkModeActive();
+          themeToApply = newIsDark ? ThemeSetting.DARK : ThemeSetting.LIGHT;
+          break;
+        }
+        case ThemeSetting.LIGHT:
+          newIsDark = false;
+          themeToApply = ThemeSetting.LIGHT;
+          break;
+        case ThemeSetting.DARK:
+          newIsDark = true;
+          themeToApply = ThemeSetting.DARK;
+          break;
+        default:
+          return;
+      }
 
-  const changeThemeSetting = (setting) => {
-    if (!isBrowser) return;
+      // Update state
+      setIsDark(newIsDark);
+      setThemeSetting(setting);
 
-    switch (setting) {
-      case ThemeSetting.SYSTEM: {
-        setIsDark(isDarkModeActive());
-        break;
-      }
-      case ThemeSetting.LIGHT:
-      case ThemeSetting.DARK:
-        setIsDark(setting === ThemeSetting.DARK);
-        break;
-    }
-    setThemeSetting(setting);
-    localStorage.setItem(DarkThemeKey, setting);
-  };
+      // Apply to DOM immediately
+      applyThemeToDOM(themeToApply);
+
+      // Persist to localStorage
+      localStorage.setItem(DarkThemeKey, setting);
+    },
+    [isDark]
+  );
 
   return (
     <ThemeManagerContext.Provider