fix: dark theme (#1096)

bylapidist · May 27, 2022 · c83c698 · c83c698
1 parent 7657411
commit c83c698
Showing 1 changed file with 5 additions and 8 deletions.
diff --git a/src/components/theme-provider/index.tsx b/src/components/theme-provider/index.tsx
@@ -63,22 +63,19 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     const initialTheme: Theme = useTheme();
     const baseTheme: Theme | undefined = mergeThemes(initialTheme, theme);
 
-    const [isDarkMode, setIsDarkMode] = React.useState<boolean>();
     const [themeContext, setThemeContext] = React.useState<Theme | undefined>(
         baseTheme
     );
 
     React.useEffect(() => {
-        const isDarkModePersisted =
+        const prefersDarkTheme =
+            (window.matchMedia &&
+                window.matchMedia('(prefers-color-scheme: dark)').matches) ||
             localStorage.getItem('isDarkMode') === 'true';
-        setIsDarkMode(isDarkModePersisted);
-    }, [setIsDarkMode]);
-
-    React.useEffect(() => {
         setThemeContext(
-            isDarkMode ? mergeThemes(baseTheme, darkTheme) : baseTheme
+            prefersDarkTheme ? mergeThemes(baseTheme, darkTheme) : baseTheme
         );
-    }, [isDarkMode, baseTheme]);
+    }, [baseTheme, darkTheme]);
 
     return (
         <>