1 |
0d90d67b
|
Vaclav Honzik
|
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 |
|
|
|
13 |
|
|
const buildTheme = (paletteMode: PaletteMode) =>
|
14 |
|
|
createTheme({
|
15 |
|
|
palette: {
|
16 |
|
|
mode: paletteMode,
|
17 |
|
|
},
|
18 |
|
|
shape: {
|
19 |
|
|
borderRadius: 16
|
20 |
|
|
},
|
21 |
|
|
typography: {
|
22 |
|
|
fontFamily: [
|
23 |
|
|
'-apple-system',
|
24 |
|
|
'BlinkMacSystemFont',
|
25 |
|
|
'"Segoe UI"',
|
26 |
|
|
'Roboto',
|
27 |
|
|
'"Helvetica Neue"',
|
28 |
|
|
'Arial',
|
29 |
|
|
'sans-serif',
|
30 |
|
|
'"Apple Color Emoji"',
|
31 |
|
|
'"Segoe UI Emoji"',
|
32 |
|
|
'"Segoe UI Symbol"',
|
33 |
|
|
].join(','),
|
34 |
|
|
},
|
35 |
|
|
})
|
36 |
|
|
|
37 |
|
|
const paletteMode = useSelector(
|
38 |
|
|
(state: RootState) => state.theme.paletteMode
|
39 |
|
|
)
|
40 |
|
|
|
41 |
|
|
const [theme, setTheme] = useState<Theme>(buildTheme(paletteMode))
|
42 |
|
|
useEffect(() => {
|
43 |
|
|
setTheme(() => {
|
44 |
|
|
return buildTheme(paletteMode)
|
45 |
|
|
})
|
46 |
|
|
}, [paletteMode])
|
47 |
|
|
|
48 |
|
|
return (
|
49 |
|
|
<ThemeProvider theme={theme}>
|
50 |
|
|
{children}
|
51 |
|
|
</ThemeProvider>
|
52 |
|
|
)
|
53 |
|
|
}
|
54 |
|
|
|
55 |
|
|
export default ThemeWrapper
|