fix: navbar background color

Author: calpa

src/components/NavBar/index.tsx

@@ -25,7 +25,6 @@ function NavBar(props: NavBarProps) {
     avatarAlt,
     avatarImage,
     title,
-    color,
     onClick,
     handleTitleClick,
     position,
@@ -43,7 +42,7 @@ function NavBar(props: NavBarProps) {
   };
 
   return (
-    <AppBar color={color} position={position}>
+    <AppBar color="navbar" position={position}>
       <Container maxWidth="xl">
         <Toolbar disableGutters>
           <Typography
@@ -96,7 +95,9 @@ function NavBar(props: NavBarProps) {
             >
               {pages.map((page: string) => (
                 <MenuItem key={page} onClick={handleNavItemClick}>
-                  <Typography textAlign="center">{page}</Typography>
+                  <Typography textAlign="center" color="navbar.contrastColor">
+                    {page}
+                  </Typography>
                 </MenuItem>
               ))}
             </Menu>
@@ -124,7 +125,12 @@ function NavBar(props: NavBarProps) {
               <Button
                 key={page}
                 onClick={handleNavItemClick}
-                sx={{ color: navItemColor, display: "block" }}
+                sx={{
+                  display: "block",
+                  color: (theme) =>
+                    theme.palette.getContrastText(theme.palette.navbar.main),
+                }}
+                // color="navbar.contrastText"
                 id={`blog-nav-item-${page}`}
               >
                 {page}

src/components/NavBar/navbar.d.ts

@@ -18,3 +18,22 @@ export type NavBarProps = {
   handleTitleClick?: (event: BaseSyntheticEvent) => void;
   position?: "fixed" | "absolute" | "sticky" | "static" | "relative";
 };
+
+declare module "@mui/material/AppBar" {
+  interface AppBarPropsColorOverrides {
+    blue: true;
+    navbar: true;
+  }
+}
+
+declare module "@mui/material/styles" {
+  interface Palette {
+    blue: Palette["primary"];
+    navbar: Palette["primary"];
+  }
+
+  interface PaletteOptions {
+    blue: PaletteOptions["primary"];
+    navbar: PaletteOptions["primary"];
+  }
+}

src/themes/dark.theme.js src/themes/dark.theme.ts

@@ -3,10 +3,26 @@
 import { createTheme } from "@mui/material";
 import components from "./components";
 
+declare module "@mui/material/styles" {
+  interface Palette {
+    blue: Palette["primary"];
+    navbar: Palette["primary"];
+  }
+
+  interface PaletteOptions {
+    blue: PaletteOptions["primary"];
+    navbar: PaletteOptions["primary"];
+  }
+}
+
 export const lightTheme = createTheme({
   components,
   palette: {
     mode: "light",
+    navbar: {
+      main: "#f5f5f5",
+      // contrastText: '#999'
+    },
     blue: {
       light: "#337ab7",
       main: "#0056b3",