hard coded the background colors in theme to keep them consistent between light and dark modes

src/app/App.tsx

@@ -5,7 +5,7 @@ import HTTPProvider from 'providers/http'
 import { useState } from 'react'
 import LoadingScreen from './LoadingScreen'
 import UserWrapper from './UserWrapper'
-import { Theme, ThemeProvider } from '@mui/material'
+import { CssBaseline, Theme, ThemeProvider } from '@mui/material'
 import { CreateTheme } from '../theme/theme'
 import { getThemeType, setThemeType } from '../theme/themeType'
 
@@ -40,6 +40,7 @@ function App() {
       cacheLocation='localstorage'
     >
       <ThemeProvider theme={palette}>
+        <CssBaseline />
         <AuthWrapper setToken={setToken}>
           { token ? 
             <HTTPProvider token={token}>

src/app/Header.tsx

@@ -22,10 +22,11 @@ const useStyles = makeStyles((theme: Theme) => ({
         marginRight: theme.spacing(0.5),
         [theme.breakpoints.up("md")]: {
             marginRight: theme.spacing(1.5)
-        }
+        },
+        color: getSignatureAccentColour() + " !important"
     },
     button: {
-        color: getSignatureAccentColour()
+        color: getSignatureAccentColour() + " !important"
     },
     hide: {
         display: "none"
@@ -85,6 +86,8 @@ export default function Header(props: Props) {
     const themeType = useThemeType();
     const classes = useStyles() 
 
+    console.log(getSignatureColour())
+
     return (
         <AppBar position="fixed" className={classes.appBar}>
             <Toolbar disableGutters className={classes.toolbar}>
@@ -94,7 +97,8 @@ export default function Header(props: Props) {
                         color="inherit"
                         aria-label="Open side menu"
                         onClick={openSide}
-                        className={classNames(classes.button, sideIsOpen && classes.hide)}>
+                        style={{ color: getSignatureAccentColour() }}
+                        className={classes.button}>
                             <Menu />
                     </IconButton>
                     {/* )} */}

src/navigation/SideNavigator.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight, People } from "@mui/icons-material";
+import { ChevronRight, People, PeopleOutline, PeopleOutlined, PeopleSharp } from "@mui/icons-material";
 import ChevronLeft from "@mui/icons-material/ChevronLeft";
 import { darken, Divider, Grid2 as Grid, IconButton, lighten, List, ListItemButton, ListItemIcon, ListItemText, SwipeableDrawer, Theme, Toolbar, Tooltip, useTheme } from "@mui/material";
 import classNames from "classnames";
@@ -6,6 +6,7 @@ import { useWidth } from "../hooks/useWidth";
 import { makeStyles } from "@mui/styles";
 import BindaptIcon from "../products/Bindapt/BindaptIcon";
 import { Link, useLocation } from "react-router-dom";
+import { getSignatureAccentColour } from "services/whiteLabel";
 
 const drawerWidth = 230;
 
@@ -49,7 +50,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     [theme.breakpoints.up("md")]: {
       paddingLeft: theme.spacing(3),
       paddingRight: theme.spacing(3)
-    }
+    },
+    color: theme.palette.mode === "light" ? "white" : "black"
   }, 
   activeItem:
     theme.palette.mode === "light"

src/theme/theme.ts

@@ -11,15 +11,15 @@ export function CreateTheme(themeType: "light" | "dark"): Theme {
   return responsiveFontSizes(createTheme(options(themeType)));
 }
 
-function generateBackgroundShades(baseColor: string, themeType: "light" | "dark") {
+function generateBackgroundShades(themeType: "light" | "dark") {
   if(themeType==="light") return ({
-    default: lighten(baseColor, 0.75),
-    paper: lighten(baseColor, 0.75)
+    default: "#f2f2f2",
+    paper: "#fafafa"
   })
 
   return {
-    default: darken(baseColor, 0.50),  // Lightens the base color for background.default
-    paper: darken(baseColor, 0.50),    // Slightly less light for background.paper
+    default: "#303030",  // Lightens the base color for background.default
+    paper: "#424242",    // Slightly less light for background.paper
   };
 }
 
@@ -27,7 +27,7 @@ function options(themeType: "light" | "dark"): ThemeOptions {
   
   const signature = getSignatureColour();
   const accent = getSignatureAccentColour();
-  const bg = generateBackgroundShades(Colours.grey[800], themeType)
+  const bg = generateBackgroundShades(themeType)
   return {
     palette: {
       primary: Colours[getPrimaryColour() as keyof typeof Colours],
@@ -197,9 +197,29 @@ function options(themeType: "light" | "dark"): ThemeOptions {
               color: accent, // Customize ripple color here
               // color: "white"
             },
+            '&:hover': {
+              color: themeType === "light" ? signature : "white", // Customize ripple color here
+              // color: "white"
+            },
+          },
+        },
+      },
+      MuiCssBaseline: {
+        styleOverrides: {
+          body: {
+            backgroundColor: bg, // Set your desired background color
+            // color: '#333', // Optionally, you can also set the default text color
+          },
+        },
+      },
+      MuiSvgIcon: {
+        styleOverrides: {
+          root: {
+            // Set the default icon color for light mode
+            // color: "black", // Dark color for icons in light mode
+          },
         },
       },
-      }
     }
   } as ThemeOptions;
 }