# All files / src/chap07 MyThemeProvider.js

0% Statements 0/6
0% Branches 0/4
0% Functions 0/3
0% Lines 0/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47

     import { useState } from 'react';
    import { createTheme, ThemeProvider } from '@mui/material/styles';
    import { amber, grey } from '@mui/material/colors';
    import { CssBaseline } from '@mui/material';
    import ThemeContext from './ThemeContext';

    export default function MyThemeProvider({ children }) {
      const [mode, setMode] = useState('light');
      // 컨텍스트에 전달할 정보 준비하기
      const themeConfig = {
        mode,
        toggleMode: () => {
          setMode(prev =>
            prev === 'light' ? 'dark' : 'light'
          );
        }
      };
      const theme = createTheme({
        mode,
        palette: {
          mode,
          ...(mode === 'light'
          ? {
              primary: amber,
            }
          : {
            primary: {
              main: grey[500],
              contrastText: '#fff'
            },
            background: {
              default: grey[900],
              paper: grey[900],
            },
          }),
        },

      });
      return (
        <ThemeContext.Provider value={themeConfig}>
          <ThemeProvider theme={theme}>
            <CssBaseline />
            {children}
          </ThemeProvider>
        </ThemeContext.Provider>
      );
    }