Skip to content

Commit

Permalink
possibly improve darkmode fuoc
Browse files Browse the repository at this point in the history
  • Loading branch information
aeolianeth committed Sep 19, 2024
1 parent 82f144f commit 8b197a5
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 26 deletions.
60 changes: 34 additions & 26 deletions src/contexts/Theme/useJuiceTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
)
Expand All @@ -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,
}
}
2 changes: 2 additions & 0 deletions src/pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'

/**
Expand All @@ -15,6 +16,7 @@ import '../styles/index.scss'
const web3Onboard = initWeb3Onboard()

export default function MyApp({ Component, pageProps }: AppProps) {
syncTheme(getInitialThemeOption())
useFathom()

if (!pageProps.i18n) {
Expand Down

0 comments on commit 8b197a5

Please sign in to comment.