1
|
import { PaletteMode } from '@mui/material'
|
2
|
import { createTheme, Theme, ThemeProvider } from '@mui/material/styles'
|
3
|
import { FunctionComponent, ReactNode, useEffect, useState } from 'react'
|
4
|
import { useSelector } from 'react-redux'
|
5
|
import { RootState } from '../redux/store'
|
6
|
|
7
|
export interface ThemeWrapperProps {
|
8
|
children: ReactNode
|
9
|
}
|
10
|
|
11
|
const ThemeWrapper: FunctionComponent<ThemeWrapperProps> = ({ children }) => {
|
12
|
const lightThemePalette = {
|
13
|
primary: {
|
14
|
main: '#A28253',
|
15
|
},
|
16
|
secondary: {
|
17
|
main: '#E3DBCF',
|
18
|
},
|
19
|
selected: {
|
20
|
main: '#C0C0C0'
|
21
|
}
|
22
|
}
|
23
|
|
24
|
const darkThemePalette = {
|
25
|
primary: {
|
26
|
main: '#e0bb84',
|
27
|
},
|
28
|
secondary: {
|
29
|
main: '#E3DBCF',
|
30
|
},
|
31
|
}
|
32
|
|
33
|
const getPalette = (paletteMode: PaletteMode) => {
|
34
|
switch (paletteMode) {
|
35
|
case 'light':
|
36
|
return lightThemePalette
|
37
|
case 'dark':
|
38
|
return darkThemePalette
|
39
|
default:
|
40
|
return lightThemePalette
|
41
|
}
|
42
|
}
|
43
|
|
44
|
const buildTheme = (paletteMode: PaletteMode) =>
|
45
|
createTheme({
|
46
|
palette: {
|
47
|
mode: paletteMode,
|
48
|
...getPalette(paletteMode),
|
49
|
},
|
50
|
shape: {
|
51
|
borderRadius: 8,
|
52
|
},
|
53
|
typography: {
|
54
|
fontFamily: [
|
55
|
'-apple-system',
|
56
|
'BlinkMacSystemFont',
|
57
|
'"Segoe UI"',
|
58
|
'Roboto',
|
59
|
'"Helvetica Neue"',
|
60
|
'Arial',
|
61
|
'sans-serif',
|
62
|
'"Apple Color Emoji"',
|
63
|
'"Segoe UI Emoji"',
|
64
|
'"Segoe UI Symbol"',
|
65
|
].join(','),
|
66
|
},
|
67
|
})
|
68
|
|
69
|
const paletteMode = useSelector(
|
70
|
(state: RootState) => state.theme.paletteMode
|
71
|
)
|
72
|
|
73
|
const [theme, setTheme] = useState<Theme>(buildTheme(paletteMode))
|
74
|
useEffect(() => {
|
75
|
setTheme(() => {
|
76
|
return buildTheme(paletteMode)
|
77
|
})
|
78
|
}, [paletteMode])
|
79
|
|
80
|
return <ThemeProvider theme={theme}>{children}</ThemeProvider>
|
81
|
}
|
82
|
|
83
|
export default ThemeWrapper
|