possibly improve darkmode fuoc

src/contexts/Theme/useJuiceTheme.ts

@@ -3,6 +3,8 @@ import type { ThemeContextType } from 'contexts/Theme/ThemeContext'
 import { startTransition, useEffect, useState } from 'react'
 import { useMedia } from './useMedia'
 
+export const THEME_STORAGE_KEY = 'jb_theme'
+
 const userPrefersDarkMode = (): boolean => {
   if (typeof window === 'undefined') {
     return false
@@ -11,16 +13,36 @@ const userPrefersDarkMode = (): boolean => {
   return window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? false
 }
 
-const getInitialThemeOption = (storageKey: string) => {
-  const storedThemeOption = localStorage?.getItem(storageKey)
+export const getInitialThemeOption = () => {
+  if (typeof window === 'undefined') {
+    return false
+  }
+
+  const storedThemeOption = localStorage?.getItem(THEME_STORAGE_KEY)
   if (storedThemeOption) {
     return storedThemeOption as ThemeOption
   }
 
   return userPrefersDarkMode() ? ThemeOption.dark : ThemeOption.light
 }
 
-export function useJuiceTheme(storageKey = 'jb_theme'): ThemeContextType {
+export const syncTheme = (themeOption: ThemeOption) => {
+  if (typeof document === 'undefined') {
+    return false
+  }
+
+  if (themeOption === ThemeOption.dark) {
+    document.body.classList.add('dark')
+  } else {
+    document.body.classList.remove('dark')
+  }
+
+  document.documentElement.style.setProperty('color-scheme', themeOption)
+
+  localStorage?.setItem(THEME_STORAGE_KEY, themeOption)
+}
+
+export function useJuiceTheme(): ThemeContextType {
   const [currentThemeOption, setCurrentThemeOption] = useState<ThemeOption>(
     'light' as ThemeOption,
   )
@@ -29,33 +51,19 @@ export function useJuiceTheme(storageKey = 'jb_theme'): ThemeContextType {
 
   // Load the theme from local storage on initial load
   useEffect(() => {
-    const initialThemeOption = getInitialThemeOption(storageKey)
-    startTransition(() => {
-      setCurrentThemeOption(initialThemeOption)
-    })
-  }, [storageKey])
-
-  // Set the theme on the body element
-  // This is needed for tailwind css dark theme classes to work
-  useEffect(() => {
-    if (currentThemeOption === ThemeOption.dark) {
-      document.body.classList.add('dark')
-    } else {
-      document.body.classList.remove('dark')
-    }
-    document.documentElement.style.setProperty(
-      'color-scheme',
-      currentThemeOption,
-    )
-  }, [currentThemeOption])
+    const initialThemeOption = getInitialThemeOption(THEME_STORAGE_KEY)
+    setCurrentThemeOption(initialThemeOption)
+  }, [])
+
+  function setThemeOption(themeOption: ThemeOption) {
+    syncTheme(themeOption)
+    setCurrentThemeOption(themeOption)
+  }
 
   return {
     themeOption: currentThemeOption,
     forThemeOption: map => map[currentThemeOption],
-    setThemeOption: (themeOption: ThemeOption) => {
-      setCurrentThemeOption(themeOption)
-      localStorage?.setItem(storageKey, themeOption)
-    },
+    setThemeOption,
     isMobile,
   }
 }

src/pages/_app.tsx

@@ -5,6 +5,7 @@ import SupabaseSessionProvider from 'contexts/SupabaseSession/SupabaseSessionPro
 import { initWeb3Onboard } from 'hooks/Wallet/initWeb3Onboard'
 import { useFathom } from 'lib/fathom'
 import type { AppProps } from 'next/app'
+import { getInitialThemeOption, syncTheme } from 'contexts/Theme/useJuiceTheme'
 import '../styles/index.scss'
 
 /**
@@ -15,6 +16,7 @@ import '../styles/index.scss'
 const web3Onboard = initWeb3Onboard()
 
 export default function MyApp({ Component, pageProps }: AppProps) {
+  syncTheme(getInitialThemeOption())
   useFathom()
 
   if (!pageProps.i18n) {