fix theme cross-tab write loop (#2774)

* don't write on onUpdate, memoize

* refac useColorModeTheme
zio/stable
Hailey 2024-02-06 21:16:50 -08:00 committed by GitHub
parent dc6603a1b9
commit 573cf31d86
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 49 additions and 37 deletions

View File

@ -1,5 +1,5 @@
import React from 'react'
import {useColorScheme} from 'react-native'
import {ColorSchemeName, useColorScheme} from 'react-native'
import {useThemePrefs} from 'state/shell'
import {isWeb} from 'platform/detection'
@ -10,21 +10,31 @@ export function useColorModeTheme(): ThemeName {
const colorScheme = useColorScheme()
const {colorMode, darkTheme} = useThemePrefs()
return React.useMemo(() => {
if (
(colorMode === 'system' && colorScheme === 'light') ||
colorMode === 'light'
) {
updateDocument('light')
updateSystemBackground('light')
return 'light'
} else {
const themeName = darkTheme ?? 'dim'
updateDocument(themeName)
updateSystemBackground(themeName)
return themeName
}
}, [colorMode, darkTheme, colorScheme])
React.useLayoutEffect(() => {
const theme = getThemeName(colorScheme, colorMode, darkTheme)
updateDocument(theme)
updateSystemBackground(theme)
}, [colorMode, colorScheme, darkTheme])
return React.useMemo(
() => getThemeName(colorScheme, colorMode, darkTheme),
[colorScheme, colorMode, darkTheme],
)
}
function getThemeName(
colorScheme: ColorSchemeName,
colorMode: 'system' | 'light' | 'dark',
darkTheme?: ThemeName,
) {
if (
(colorMode === 'system' && colorScheme === 'light') ||
colorMode === 'light'
) {
return 'light'
} else {
return darkTheme ?? 'dim'
}
}
function updateDocument(theme: ThemeName) {

View File

@ -20,36 +20,38 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
const [colorMode, setColorMode] = React.useState(persisted.get('colorMode'))
const [darkTheme, setDarkTheme] = React.useState(persisted.get('darkTheme'))
const setColorModeWrapped = React.useCallback(
(_colorMode: persisted.Schema['colorMode']) => {
setColorMode(_colorMode)
persisted.write('colorMode', _colorMode)
},
[setColorMode],
const stateContextValue = React.useMemo(
() => ({
colorMode,
darkTheme,
}),
[colorMode, darkTheme],
)
const setDarkThemeWrapped = React.useCallback(
(_darkTheme: persisted.Schema['darkTheme']) => {
setDarkTheme(_darkTheme)
persisted.write('darkTheme', _darkTheme)
},
[setDarkTheme],
const setContextValue = React.useMemo(
() => ({
setColorMode: (_colorMode: persisted.Schema['colorMode']) => {
setColorMode(_colorMode)
persisted.write('colorMode', _colorMode)
},
setDarkTheme: (_darkTheme: persisted.Schema['darkTheme']) => {
setDarkTheme(_darkTheme)
persisted.write('darkTheme', _darkTheme)
},
}),
[],
)
React.useEffect(() => {
return persisted.onUpdate(() => {
setColorModeWrapped(persisted.get('colorMode'))
setDarkThemeWrapped(persisted.get('darkTheme'))
setColorMode(persisted.get('colorMode'))
setDarkTheme(persisted.get('darkTheme'))
})
}, [setColorModeWrapped, setDarkThemeWrapped])
}, [])
return (
<stateContext.Provider value={{colorMode, darkTheme}}>
<setContext.Provider
value={{
setDarkTheme: setDarkThemeWrapped,
setColorMode: setColorModeWrapped,
}}>
<stateContext.Provider value={stateContextValue}>
<setContext.Provider value={setContextValue}>
{children}
</setContext.Provider>
</stateContext.Provider>