1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
import React from 'react'
import * as persisted from '#/state/persisted'
type StateContext = {
colorMode: persisted.Schema['colorMode']
darkTheme: persisted.Schema['darkTheme']
}
type SetContext = {
setColorMode: (v: persisted.Schema['colorMode']) => void
setDarkTheme: (v: persisted.Schema['darkTheme']) => void
}
const stateContext = React.createContext<StateContext>({
colorMode: 'system',
darkTheme: 'dark',
})
stateContext.displayName = 'ColorModeStateContext'
const setContext = React.createContext<SetContext>({} as SetContext)
setContext.displayName = 'ColorModeSetContext'
export function Provider({children}: React.PropsWithChildren<{}>) {
const [colorMode, setColorMode] = React.useState(persisted.get('colorMode'))
const [darkTheme, setDarkTheme] = React.useState(persisted.get('darkTheme'))
const stateContextValue = React.useMemo(
() => ({
colorMode,
darkTheme,
}),
[colorMode, darkTheme],
)
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(() => {
const unsub1 = persisted.onUpdate('darkTheme', nextDarkTheme => {
setDarkTheme(nextDarkTheme)
})
const unsub2 = persisted.onUpdate('colorMode', nextColorMode => {
setColorMode(nextColorMode)
})
return () => {
unsub1()
unsub2()
}
}, [])
return (
<stateContext.Provider value={stateContextValue}>
<setContext.Provider value={setContextValue}>
{children}
</setContext.Provider>
</stateContext.Provider>
)
}
export function useThemePrefs() {
return React.useContext(stateContext)
}
export function useSetThemePrefs() {
return React.useContext(setContext)
}
|
