All files / src/chap06 MaterialMode.js

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>
//   );
// }