From dde0bde57cd3db0670850e0e7a10be09c0ddadf2 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Wed, 27 Sep 2023 16:19:41 -0230
Subject: [PATCH] Use resolved theme (#17753)

* Use resolved theme

* Update
---
 apps/docs/components/Frameworks.tsx           |  5 ++--
 .../NavigationMenuGuideListItems.tsx          |  4 +--
 .../Navigation/NavigationMenu/TopNavBar.tsx   |  6 ++--
 apps/docs/layouts/SiteLayout.tsx              |  4 +--
 .../interfaces/App/AppBannerWrapper.tsx       |  8 ++---
 .../NavigationBar/NavigationBar.tsx           | 30 +++++++++++--------
 6 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/apps/docs/components/Frameworks.tsx b/apps/docs/components/Frameworks.tsx
index baa4da4efb..8ea096c6c1 100644
--- a/apps/docs/components/Frameworks.tsx
+++ b/apps/docs/components/Frameworks.tsx
@@ -2,7 +2,7 @@ import ButtonCard from './ButtonCard'
 import { useTheme } from 'next-themes'
 
 const Frameworks = () => {
-  const { theme } = useTheme()
+  const { resolvedTheme } = useTheme()
 
   const frameworks = [
     {
@@ -110,8 +110,7 @@ const Frameworks = () => {
             layout="horizontal"
             to={x.href}
             title={x.name}
-            // [Joshen] Nice to have: theming
-            icon={theme === 'dark' ? x.logo.dark : x.logo.light}
+            icon={resolvedTheme === 'dark' ? x.logo.dark : x.logo.light}
           />
         </div>
       ))}
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
index b5b5c2b870..3398ad1e0e 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
@@ -29,7 +29,7 @@ const HeaderLink = React.memo(function HeaderLink(props: {
 
 const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any) {
   const router = useRouter()
-  const { theme } = useTheme()
+  const { resolvedTheme } = useTheme()
   const activeItem = props.subItem.url === router.asPath
   const activeItemRef = useRef(null)
 
@@ -78,7 +78,7 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
                 alt={props.subItem.name + router.basePath}
                 src={
                   `${router.basePath}` +
-                  `${props.subItem.icon}${theme !== 'dark' ? '-light' : ''}.svg`
+                  `${props.subItem.icon}${resolvedTheme !== 'dark' ? '-light' : ''}.svg`
                 }
                 width={15}
                 height={15}
diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx
index a1f22876b6..5ba553eaa3 100644
--- a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx
@@ -10,7 +10,7 @@ import { REFERENCES } from './NavigationMenu.constants'
 import ThemeToggle from '@ui/components/ThemeProvider/ThemeToggle'
 
 const TopNavBar: FC = () => {
-  const { theme } = useTheme()
+  const { resolvedTheme } = useTheme()
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
   const { asPath, push } = useRouter()
@@ -59,7 +59,9 @@ const TopNavBar: FC = () => {
             <a className=" flex items-center gap-2">
               <Image
                 className="cursor-pointer"
-                src={theme === 'dark' ? '/docs/supabase-dark.svg' : '/docs/supabase-light.svg'}
+                src={
+                  resolvedTheme === 'dark' ? '/docs/supabase-dark.svg' : '/docs/supabase-light.svg'
+                }
                 width={96}
                 height={24}
                 alt="Supabase Logo"
diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index 0120bc2c5b..f65a3985c8 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -220,13 +220,13 @@ const MobileMenuBackdrop = memo(function MobileMenuBackdrop() {
 })
 
 const HeaderLogo = memo(function HeaderLogo() {
-  const { theme } = useTheme()
+  const { resolvedTheme } = useTheme()
   return (
     <Link href="/">
       <a className="px-10 flex items-center gap-2">
         <Image
           className="cursor-pointer"
-          src={theme === 'dark' ? '/docs/supabase-dark.svg' : '/docs/supabase-light.svg'}
+          src={resolvedTheme === 'dark' ? '/docs/supabase-dark.svg' : '/docs/supabase-light.svg'}
           width={96}
           height={24}
           alt="Supabase Logo"
diff --git a/studio/components/interfaces/App/AppBannerWrapper.tsx b/studio/components/interfaces/App/AppBannerWrapper.tsx
index 6943a53153..186be70cd9 100644
--- a/studio/components/interfaces/App/AppBannerWrapper.tsx
+++ b/studio/components/interfaces/App/AppBannerWrapper.tsx
@@ -7,15 +7,15 @@ import { PropsWithChildren, useEffect } from 'react'
 
 const AppBannerWrapper = ({ children }: PropsWithChildren<{}>) => {
   const monaco = useMonaco()
-  const { theme } = useTheme()
+  const { resolvedTheme } = useTheme()
   const ongoingIncident = useFlag('ongoingIncident')
 
   useEffect(() => {
-    if (monaco && theme) {
-      const mode: any = getTheme(theme)
+    if (monaco && resolvedTheme) {
+      const mode: any = getTheme(resolvedTheme)
       monaco.editor.defineTheme('supabase', mode)
     }
-  }, [theme, monaco])
+  }, [resolvedTheme, monaco])
 
   return (
     <div className="min-h-full flex flex-col">
diff --git a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
index e77376c4fc..c1d8b1aea4 100644
--- a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
+++ b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
@@ -10,6 +10,7 @@ import { useRouter } from 'next/router'
 import {
   Button,
   DropdownMenuContent_Shadcn_,
+  DropdownMenuGroup_Shadcn_,
   DropdownMenuItem_Shadcn_,
   DropdownMenuLabel_Shadcn_,
   DropdownMenuRadioGroup_Shadcn_,
@@ -31,12 +32,12 @@ import {
   generateToolRoutes,
 } from './NavigationBar.utils'
 import NavigationIconButton from './NavigationIconButton'
+import ThemeToggle from '@ui/components/ThemeProvider/ThemeToggle'
 
 const NavigationBar = () => {
   const router = useRouter()
   const { theme, setTheme } = useTheme()
   const { ref: projectRef } = useParams()
-
   const os = detectOS()
   const { setIsOpen } = useCommandMenu()
 
@@ -159,17 +160,22 @@ const NavigationBar = () => {
                 </>
               )}
               <DropdownMenuLabel_Shadcn_>Theme</DropdownMenuLabel_Shadcn_>
-              <DropdownMenuRadioGroup_Shadcn_
-                key="theme"
-                value={theme === 'dark' ? 'dark' : 'light'}
-                onValueChange={(value: string) => setTheme(value)}
-              >
-                <DropdownMenuRadioItem_Shadcn_ value="system">
-                  System default
-                </DropdownMenuRadioItem_Shadcn_>
-                <DropdownMenuRadioItem_Shadcn_ value="dark">Dark</DropdownMenuRadioItem_Shadcn_>
-                <DropdownMenuRadioItem_Shadcn_ value="light">Light</DropdownMenuRadioItem_Shadcn_>
-              </DropdownMenuRadioGroup_Shadcn_>
+              <DropdownMenuGroup_Shadcn_>
+                <DropdownMenuRadioGroup_Shadcn_
+                  value={theme}
+                  onValueChange={(value) => {
+                    setTheme(value)
+                  }}
+                >
+                  <DropdownMenuRadioItem_Shadcn_ value={'system'}>
+                    System
+                  </DropdownMenuRadioItem_Shadcn_>
+                  <DropdownMenuRadioItem_Shadcn_ value={'dark'}>Dark</DropdownMenuRadioItem_Shadcn_>
+                  <DropdownMenuRadioItem_Shadcn_ value={'light'}>
+                    Light
+                  </DropdownMenuRadioItem_Shadcn_>
+                </DropdownMenuRadioGroup_Shadcn_>
+              </DropdownMenuGroup_Shadcn_>
             </DropdownMenuContent_Shadcn_>
           </DropdownMenu_Shadcn_>
         </ul>