# All files / src/chap06 MaterialMode.js

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

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
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93

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

    export default function MaterialMode() {
      // const mode = useMediaQuery('(prefers-color-scheme: dark)') ?
      //   'dark' : 'light';

      // 현재 모드를 관리하는 State
      const [mode, setMode] = useState('light');
      // State 값 mode를 light⇔dark으로 반전
      const toggleMode = () => setMode(prev =>
        prev === 'light' ? 'dark' : 'light'
      );
      // 테마 정의
      const theme = createTheme({
        palette: {
          mode,
          // mode 값에 따라 테마 전환
          ...(mode === 'light'
          // 라이트 모드에서 사용하는 팔레트
          ? {
              primary: amber,
            }
          // 다크 모드에서 사용하는 팔레트
          : {
            primary: {
              main: grey[500],
              contrastText: '#fff'
            },
            background: {
              default: grey[900],
              paper: grey[900],
            },
          }),
        },
      });

      return (
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <Button variant="contained" onClick={toggleMode}>
            Mode {mode}
          </Button>
        </ThemeProvider>
      );
    }

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

    // export default function MaterialMode() {
    //   const mode = useMediaQuery('(prefers-color-scheme: dark)') ?
    //     'dark' : 'light';

    //   // 테마 정의
    //   const theme = createTheme({
    //     palette: {
    //       mode,
    //       // mode 값에 따라 테마 전환
    //       ...(mode === 'light'
    //       // 라이트 모드에서 사용하는 팔레트
    //       ? {
    //           primary: amber,
    //         }
    //       // 다크 모드에서 사용하는 팔레트
    //       : {
    //         primary: {
    //           main: grey[500],
    //           contrastText: '#fff'
    //         },
    //         background: {
    //           default: grey[900],
    //           paper: grey[900],
    //         },
    //       }),
    //     },
    //   });

    //   return (
    //     <ThemeProvider theme={theme}>
    //       <CssBaseline />
    //       <Button variant="contained">
    //         Mode {mode}
    //       </Button>
    //     </ThemeProvider>
    //   );
    // }