Fix next-themes resolvedTheme bug (#18818)

temporary fix for next-themes bug

apps/www/components/Footer/index.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import Link from 'next/link'
 import { useTheme } from 'next-themes'
 import { Badge, IconDiscord, IconGitHubSolid, IconTwitterX, IconYoutubeSolid, cn } from 'ui'
@@ -21,6 +22,21 @@ const Footer = (props: Props) => {
 
   const isLaunchWeekPage = pathname.includes('launch-week') || pathname === '/'
 
+  /**
+   * Temporary fix for next-theme client side bug
+   * https://github.com/pacocoursey/next-themes/issues/169
+   * TODO: remove when bug has been fixed
+   */
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
   return (
     <footer className={cn('bg-alternative', props.className)} aria-labelledby="footerHeading">
       <h2 id="footerHeading" className="sr-only">
@@ -55,7 +71,7 @@ const Footer = (props: Props) => {
                 src={
                   isLaunchWeekPage
                     ? supabaseLogoWordmarkDark
-                    : resolvedTheme === 'dark'
+                    : mounted && resolvedTheme === 'dark'
                     ? supabaseLogoWordmarkDark
                     : supabaseLogoWordmarkLight
                 }

apps/www/components/Nav/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -51,6 +51,21 @@ const Nav = () => {
     if (width >= 1024) setOpen(false)
   }, [width])
 
+  /**
+   * Temporary fix for next-theme client side bug
+   * https://github.com/pacocoursey/next-themes/issues/169
+   * TODO: remove when bug has been fixed
+   */
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
   return (
     <>
       <div className="sticky top-0 z-40 transform" style={{ transform: 'translate3d(0,0,999px)' }}>
@@ -78,7 +93,7 @@ const Nav = () => {
                   >
                     <Image
                       src={
-                        isLaunchWeekPage || resolvedTheme === 'dark' || isHomePage
+                        isLaunchWeekPage || (mounted && resolvedTheme === 'dark') || isHomePage
                           ? supabaseLogoWordmarkDark
                           : supabaseLogoWordmarkLight
                       }
@@ -161,7 +176,7 @@ const Nav = () => {
           <MobileMenu
             open={open}
             setOpen={setOpen}
-            isDarkMode={isLaunchWeekPage || resolvedTheme === 'dark' || isHomePage}
+            isDarkMode={isLaunchWeekPage || (mounted && resolvedTheme === 'dark') || isHomePage}
             menu={menu}
           />
         </nav>