Projekt

Obecné

Profil

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