fix: use isGlobalDarkMode to detect changes in theme context

rayanfer32 · Jan 17, 2023 · 02cb9ca · 02cb9ca
1 parent bb84a8d
commit 02cb9ca
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/src/components/common/NE_Chart/ChartApexPie/apex_pie.jsx b/src/components/common/NE_Chart/ChartApexPie/apex_pie.jsx
@@ -10,13 +10,13 @@ import { initialOptions } from './essentials';
 function PieChart({ series, options, labels, ...rest }) {
   const windowSize = useWindowSize();
 
-  const [isDarkMode] = useDarkMode();
+  const [, , isGlobalDarkMode] = useDarkMode();
   const [_series, setSeries] = useState(series);
   const [_options, setOptions] = useState(
     options ||
       initialOptions({
         labels,
-        theme: isDarkMode ? TYPES.THEME.DARK : TYPES.THEME.LIGHT,
+        theme: isGlobalDarkMode ? TYPES.THEME.DARK : TYPES.THEME.LIGHT,
       })
   );
 
@@ -31,14 +31,16 @@ function PieChart({ series, options, labels, ...rest }) {
   // * updates the chart when dark mode changes
   function updateChart() {
     let newOptions = { ..._options };
-    newOptions.theme.mode = isDarkMode ? TYPES.THEME.DARK : TYPES.THEME.LIGHT;
+    newOptions.theme.mode = isGlobalDarkMode
+      ? TYPES.THEME.DARK
+      : TYPES.THEME.LIGHT;
     setOptions(newOptions);
   }
 
   // * update chart on theme change
   useEffect(() => {
     updateChart();
-  }, [isDarkMode]);
+  }, [isGlobalDarkMode]);
 
   return (
     <Chart

diff --git a/src/hooks/useDarkMode/useDarkMode.js b/src/hooks/useDarkMode/useDarkMode.js
@@ -10,11 +10,13 @@ import { useMediaQuery } from '../useMediaQuery/useMediaQuery';
 export function useDarkMode() {
   const { appContext: sharedState, setAppContext: setState } = useAppContext();
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const isGlobalDarkMode = sharedState.theme === TYPES.THEME.DARK;
+
   const [darkMode, setDarkMode] = useState(() => {
     if (sharedState.theme == null) {
       return prefersDarkMode;
     } else {
-      return sharedState.theme === TYPES.THEME.DARK;
+      return;
     }
   });
 
@@ -27,5 +29,5 @@ export function useDarkMode() {
     setGlobalDarkMode(darkMode);
   }, [darkMode]);
 
-  return [darkMode, setDarkMode];
+  return [darkMode, setDarkMode, isGlobalDarkMode];
 }