From 2b27b688e6ca0a2d4028eb602f8da646f4973baa Mon Sep 17 00:00:00 2001
From: Chensokheng <52232579+Chensokheng@users.noreply.github.com>
Date: Fri, 23 Dec 2022 00:01:11 +0700
Subject: [PATCH] fix(docs): change navbar color to dark on dark mode

---
 apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx | 1 +
 apps/docs/layouts/SiteLayout.tsx                                | 2 ++
 2 files changed, 3 insertions(+)

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' : ''
     }
   }, [])