File tree Expand file tree Collapse file tree 1 file changed +20
-4
lines changed Expand file tree Collapse file tree 1 file changed +20
-4
lines changed Original file line number Diff line number Diff line change 1
1
import React from "react" ;
2
2
import { SnackbarProvider } from "notistack" ;
3
3
import { Box , useMediaQuery } from "@mui/material" ;
4
+ import CssBaseline from '@mui/material/CssBaseline' ;
4
5
import {
5
6
ThemeProvider ,
6
7
StyledEngineProvider ,
7
8
createTheme ,
8
9
} from "@mui/material/styles" ;
9
- import { indigo , purple } from "@mui/material/colors" ;
10
+ import { grey , purple , lightBlue } from "@mui/material/colors" ;
10
11
import Header from "./components/Header" ;
11
12
import {
12
13
UserProvider ,
@@ -25,16 +26,31 @@ function App() {
25
26
// https://mui.com/material-ui/customization/color/#2014-material-design-color-palettes
26
27
const theme = React . useMemo ( ( ) => createTheme ( {
27
28
palette : {
28
- primary : indigo ,
29
- secondary : purple ,
29
+ primary : {
30
+ main : lightBlue [ 600 ] ,
31
+ light : lightBlue [ 900 ] ,
32
+ dark : lightBlue [ 100 ] ,
33
+ } ,
34
+ secondary : {
35
+ main : purple [ 500 ] ,
36
+ } ,
37
+ text : {
38
+ primary : prefersDarkMode ? grey [ 100 ] : grey [ 900 ] ,
39
+ secondary : prefersDarkMode ? grey [ 200 ] : grey [ 800 ] ,
40
+ } ,
41
+ background : {
42
+ default : prefersDarkMode ? grey [ 800 ] : grey [ 200 ] ,
43
+ paper : prefersDarkMode ? grey [ 700 ] : grey [ 300 ] ,
44
+ } ,
30
45
mode : prefersDarkMode ? 'dark' : 'light' ,
31
46
} ,
32
47
}
33
48
) , [ prefersDarkMode ] ) ;
34
49
35
50
return (
36
51
< StyledEngineProvider injectFirst >
37
- < ThemeProvider theme = { theme } >
52
+ < ThemeProvider theme = { theme } >
53
+ < CssBaseline />
38
54
< SnackbarProvider maxSnack = { 3 } >
39
55
< UserProvider >
40
56
< ProjectProvider >
You can’t perform that action at this time.
0 commit comments