diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
index d5a706d6cb2..b1d344b081d 100644
--- a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
@@ -42,6 +42,7 @@ const TopNavBarRef: FC = () => {
 
     const key = localStorage.getItem('supabaseDarkMode')
     document.documentElement.className = key === 'true' ? 'dark' : ''
+    document.documentElement.style.colorScheme = key === 'true' ? 'dark' : ''
   }
 
   const onSelectVersion = (version: string) => {
diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index 9aa8c37d9c0..eb017378efd 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -294,8 +294,10 @@ const SiteLayout = ({ children }) => {
     if (!key) {
       // Default to dark mode if no preference config
       document.documentElement.className = 'dark'
+      document.documentElement.style.colorScheme = 'dark'
     } else {
       document.documentElement.className = key === 'true' ? 'dark' : ''
+      document.documentElement.style.colorScheme = key === 'true' ? 'dark' : ''
     }
   }, [])