Skip to content

Commit 4919ef2

Browse files
committed
Customize colors a bit further
1 parent 6c52d06 commit 4919ef2

File tree

1 file changed

+20
-4
lines changed

1 file changed

+20
-4
lines changed

src/App.tsx

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React from "react";
22
import { SnackbarProvider } from "notistack";
33
import { Box, useMediaQuery } from "@mui/material";
4+
import CssBaseline from '@mui/material/CssBaseline';
45
import {
56
ThemeProvider,
67
StyledEngineProvider,
78
createTheme,
89
} from "@mui/material/styles";
9-
import { indigo, purple } from "@mui/material/colors";
10+
import { grey, purple, lightBlue } from "@mui/material/colors";
1011
import Header from "./components/Header";
1112
import {
1213
UserProvider,
@@ -25,16 +26,31 @@ function App() {
2526
// https://mui.com/material-ui/customization/color/#2014-material-design-color-palettes
2627
const theme = React.useMemo(() => createTheme({
2728
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+
},
3045
mode: prefersDarkMode ? 'dark' : 'light',
3146
},
3247
}
3348
), [prefersDarkMode]);
3449

3550
return (
3651
<StyledEngineProvider injectFirst>
37-
<ThemeProvider theme={theme}>
52+
<ThemeProvider theme={theme}>
53+
<CssBaseline />
3854
<SnackbarProvider maxSnack={3}>
3955
<UserProvider>
4056
<ProjectProvider>

0 commit comments

Comments
 (0)