-
Notifications
You must be signed in to change notification settings - Fork 270
Expand file tree
/
Copy pathclient-theme.js
More file actions
34 lines (27 loc) · 985 Bytes
/
client-theme.js
File metadata and controls
34 lines (27 loc) · 985 Bytes
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
import React, { useCallback, useContext, useMemo, useState } from 'react'
import { getClientTheme, setClientTheme } from './local-settings'
const SETTINGS_THEME = getClientTheme()
const ClientThemeContext = React.createContext(SETTINGS_THEME)
function ClientThemeProvider(props) {
const [appearance, setAppearance] = useState(SETTINGS_THEME.appearance)
const [theme, setTheme] = useState(SETTINGS_THEME.theme)
const toggleAppearance = useCallback(() => {
const newAppearance = appearance === 'light' ? 'dark' : 'light'
setAppearance(newAppearance)
setTheme(null)
setClientTheme(newAppearance)
}, [appearance])
const clientTheme = useMemo(
() => ({
appearance,
theme,
toggleAppearance,
}),
[appearance, theme, toggleAppearance]
)
return <ClientThemeContext.Provider value={clientTheme} {...props} />
}
function useClientTheme() {
return useContext(ClientThemeContext)
}
export { ClientThemeProvider, useClientTheme }