diff --git a/packages/docs-ui/src/providers/ColorMode/index.tsx b/packages/docs-ui/src/providers/ColorMode/index.tsx
index 8b86cf2ec..22aff269a 100644
--- a/packages/docs-ui/src/providers/ColorMode/index.tsx
+++ b/packages/docs-ui/src/providers/ColorMode/index.tsx
@@ -28,11 +28,17 @@ export const ColorModeProvider = ({ children }: ColorModeProviderProps) => {
       return;
     }
 
-    const theme = localStorage.getItem('theme');
+    const urlTheme = new URLSearchParams(window.location.search).get(
+      'docusaurus-theme'
+    );
+    const theme = urlTheme ?? localStorage.getItem('theme');
     if (theme && (theme === 'light' || theme === 'dark')) {
       setColorMode(theme);
     } else {
-      setColorMode("light") //if no value in localstorage present
+      const prefersDark = window.matchMedia(
+        '(prefers-color-scheme: dark)'
+      ).matches;
+      setColorMode(prefersDark ? 'dark' : 'light');
     }
     setLoaded(true);
   }, []);