diff --git a/src/components/theme-provider/index.tsx b/src/components/theme-provider/index.tsx
index ccb57465..85c39c4b 100644
--- 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 (
         <>