aswi2022code-of-duty-gitlab/frontend/src/features/Theme/ThemeWrapper.tsx @ 0d90d67b

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 buildTheme = (paletteMode: PaletteMode) =>
        createTheme({
            palette: {
                mode: paletteMode,
            },
            shape: {
                borderRadius: 16
            },
            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