aswi2022code-of-duty-gitlab/frontend/src/features/Theme/ThemeWrapper.tsx @ 4d2f04f4

import { PaletteMode } from '@mui/material'
import { createTheme, Theme, ThemeProvider } from '@mui/material/styles'
import { FunctionComponent, ReactNode, useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import { RootState } from '../redux/store'

export interface ThemeWrapperProps {
    children: ReactNode
}

const ThemeWrapper: FunctionComponent<ThemeWrapperProps> = ({ children }) => {
    const lightThemePalette = {
        primary: {
            main: '#A28253',
        },
        secondary: {
            main: '#E3DBCF',
        },
        selected: {
            main: '#C0C0C0'
        }
    }

    const darkThemePalette = {
        primary: {
            main: '#e0bb84',
        },
        secondary: {
            main: '#E3DBCF',
        },
    }

    const getPalette = (paletteMode: PaletteMode) => {
        switch (paletteMode) {
            case 'light':
                return lightThemePalette
            case 'dark':
                return darkThemePalette
            default:
                return lightThemePalette
        }
    }

    const buildTheme = (paletteMode: PaletteMode) =>
        createTheme({
            palette: {
                mode: paletteMode,
                ...getPalette(paletteMode),
            },
            shape: {
                borderRadius: 8,
            },
            typography: {
                fontFamily: [
                    '-apple-system',
                    'BlinkMacSystemFont',
                    '"Segoe UI"',
                    'Roboto',
                    '"Helvetica Neue"',
                    'Arial',
                    'sans-serif',
                    '"Apple Color Emoji"',
                    '"Segoe UI Emoji"',
                    '"Segoe UI Symbol"',
                ].join(','),
            },
        })

    const paletteMode = useSelector(
        (state: RootState) => state.theme.paletteMode
    )

    const [theme, setTheme] = useState<Theme>(buildTheme(paletteMode))
    useEffect(() => {
        setTheme(() => {
            return buildTheme(paletteMode)
        })
    }, [paletteMode])

    return <ThemeProvider theme={theme}>{children}</ThemeProvider>
}

export default ThemeWrapper