Customize colors a bit further

Author: paazmaya

src/App.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import { SnackbarProvider } from "notistack";
 import { Box, useMediaQuery } from "@mui/material";
+import CssBaseline from '@mui/material/CssBaseline';
 import {
   ThemeProvider,
   StyledEngineProvider,
   createTheme,
 } from "@mui/material/styles";
-import { indigo, purple } from "@mui/material/colors";
+import { grey, purple, lightBlue } from "@mui/material/colors";
 import Header from "./components/Header";
 import {
   UserProvider,
@@ -25,16 +26,31 @@ function App() {
   // https://mui.com/material-ui/customization/color/#2014-material-design-color-palettes
   const theme = React.useMemo(() => createTheme({
     palette: {
-      primary: indigo,
-      secondary: purple,
+      primary: {
+        main: lightBlue[600],
+        light: lightBlue[900],
+        dark: lightBlue[100],
+      },
+      secondary: {
+        main: purple[500],
+      },
+      text: {
+        primary: prefersDarkMode ? grey[100] : grey[900],
+        secondary: prefersDarkMode ? grey[200] : grey[800],
+      },
+      background: {
+        default: prefersDarkMode ? grey[800] : grey[200],
+        paper: prefersDarkMode ? grey[700] : grey[300],
+      },
       mode: prefersDarkMode ? 'dark' : 'light',
     },
   }
   ), [prefersDarkMode]);
 
   return (
     <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={theme}>      
+        <CssBaseline />
         <SnackbarProvider maxSnack={3}>
           <UserProvider>
             <ProjectProvider>