fix theme cross-tab write loop (#2774)
* don't write on onUpdate, memoize * refac useColorModeThemezio/stable
parent
dc6603a1b9
commit
573cf31d86
|
@ -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) {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue