forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
fix theme cross-tab write loop (#2774)
* don't write on onUpdate, memoize
* refac useColorModeTheme
+49
-37
+26
-16
src/alf/util/useColorModeTheme.ts
+26
-16
src/alf/util/useColorModeTheme.ts
···
1
1
import React from 'react'
2
-
import {useColorScheme} from 'react-native'
2
+
import {ColorSchemeName, useColorScheme} from 'react-native'
3
3
4
4
import {useThemePrefs} from 'state/shell'
5
5
import {isWeb} from 'platform/detection'
···
10
10
const colorScheme = useColorScheme()
11
11
const {colorMode, darkTheme} = useThemePrefs()
12
12
13
-
return React.useMemo(() => {
14
-
if (
15
-
(colorMode === 'system' && colorScheme === 'light') ||
16
-
colorMode === 'light'
17
-
) {
18
-
updateDocument('light')
19
-
updateSystemBackground('light')
20
-
return 'light'
21
-
} else {
22
-
const themeName = darkTheme ?? 'dim'
23
-
updateDocument(themeName)
24
-
updateSystemBackground(themeName)
25
-
return themeName
26
-
}
27
-
}, [colorMode, darkTheme, colorScheme])
13
+
React.useLayoutEffect(() => {
14
+
const theme = getThemeName(colorScheme, colorMode, darkTheme)
15
+
updateDocument(theme)
16
+
updateSystemBackground(theme)
17
+
}, [colorMode, colorScheme, darkTheme])
18
+
19
+
return React.useMemo(
20
+
() => getThemeName(colorScheme, colorMode, darkTheme),
21
+
[colorScheme, colorMode, darkTheme],
22
+
)
23
+
}
24
+
25
+
function getThemeName(
26
+
colorScheme: ColorSchemeName,
27
+
colorMode: 'system' | 'light' | 'dark',
28
+
darkTheme?: ThemeName,
29
+
) {
30
+
if (
31
+
(colorMode === 'system' && colorScheme === 'light') ||
32
+
colorMode === 'light'
33
+
) {
34
+
return 'light'
35
+
} else {
36
+
return darkTheme ?? 'dim'
37
+
}
28
38
}
29
39
30
40
function updateDocument(theme: ThemeName) {
+23
-21
src/state/shell/color-mode.tsx
+23
-21
src/state/shell/color-mode.tsx
···
20
20
const [colorMode, setColorMode] = React.useState(persisted.get('colorMode'))
21
21
const [darkTheme, setDarkTheme] = React.useState(persisted.get('darkTheme'))
22
22
23
-
const setColorModeWrapped = React.useCallback(
24
-
(_colorMode: persisted.Schema['colorMode']) => {
25
-
setColorMode(_colorMode)
26
-
persisted.write('colorMode', _colorMode)
27
-
},
28
-
[setColorMode],
23
+
const stateContextValue = React.useMemo(
24
+
() => ({
25
+
colorMode,
26
+
darkTheme,
27
+
}),
28
+
[colorMode, darkTheme],
29
29
)
30
30
31
-
const setDarkThemeWrapped = React.useCallback(
32
-
(_darkTheme: persisted.Schema['darkTheme']) => {
33
-
setDarkTheme(_darkTheme)
34
-
persisted.write('darkTheme', _darkTheme)
35
-
},
36
-
[setDarkTheme],
31
+
const setContextValue = React.useMemo(
32
+
() => ({
33
+
setColorMode: (_colorMode: persisted.Schema['colorMode']) => {
34
+
setColorMode(_colorMode)
35
+
persisted.write('colorMode', _colorMode)
36
+
},
37
+
setDarkTheme: (_darkTheme: persisted.Schema['darkTheme']) => {
38
+
setDarkTheme(_darkTheme)
39
+
persisted.write('darkTheme', _darkTheme)
40
+
},
41
+
}),
42
+
[],
37
43
)
38
44
39
45
React.useEffect(() => {
40
46
return persisted.onUpdate(() => {
41
-
setColorModeWrapped(persisted.get('colorMode'))
42
-
setDarkThemeWrapped(persisted.get('darkTheme'))
47
+
setColorMode(persisted.get('colorMode'))
48
+
setDarkTheme(persisted.get('darkTheme'))
43
49
})
44
-
}, [setColorModeWrapped, setDarkThemeWrapped])
50
+
}, [])
45
51
46
52
return (
47
-
<stateContext.Provider value={{colorMode, darkTheme}}>
48
-
<setContext.Provider
49
-
value={{
50
-
setDarkTheme: setDarkThemeWrapped,
51
-
setColorMode: setColorModeWrapped,
52
-
}}>
53
+
<stateContext.Provider value={stateContextValue}>
54
+
<setContext.Provider value={setContextValue}>
53
55
{children}
54
56
</setContext.Provider>
55
57
</stateContext.Provider>