Using the new palette on Navbar

src/components/Navbar.jsx

-import * as React from "react";
-import PropTypes from "prop-types";
-import AppBar from "@mui/material/AppBar";
-import Toolbar from "@mui/material/Toolbar";
-import Typography from "@mui/material/Typography";
-import useScrollTrigger from "@mui/material/useScrollTrigger";
-import Slide from "@mui/material/Slide";
+import * as React from "react"
+import PropTypes from "prop-types"
+
+import AppBar from "@mui/material/AppBar"
+import Toolbar from "@mui/material/Toolbar"
+import Typography from "@mui/material/Typography"
+import useScrollTrigger from "@mui/material/useScrollTrigger"
+import Slide from "@mui/material/Slide"
 import {
   useTheme,
   useMediaQuery,
-} from "@material-ui/core";
+} from "@material-ui/core"
+
+
+import Drawer from "./Drawer"
+import { NavLink } from "./styled"
+import theme from "./palette"
 
-import Drawer from "./Drawer";
-import { NavLink } from "./styled";
-import { color } from "@mui/system";
+const myPalette = theme.palette
 
 function HideOnScroll(props) {
-  const { children, window } = props;
+  const { children, window } = props
   const trigger = useScrollTrigger({
     target: window ? window() : undefined,
-  });
+  })
 
   return (
     <Slide appear={false} direction="down" in={!trigger}>
       {children}
     </Slide>
-  );
+  )
 }
 
 HideOnScroll.propTypes = {
   children: PropTypes.element.isRequired,
   window: PropTypes.func,
-};
+}
 
 function Navbar(props) {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"))
 
   return (
     <HideOnScroll {...props}>
       <AppBar 
         sx={{ 
-          backgroundColor: "#074B6B !important", 
+          backgroundColor: `${myPalette.primary.main} !important`, 
           px: {
             lg: 8,
           },
           color: {
-            md: "#ffffff !important",
-            sm: "#404040 !important"
+            md: `${myPalette.primary.contrastText} !important`,
+            sm: `${myPalette.primary.text} !important`,
           }
         }}>
         <Toolbar>
@@ -71,7 +75,7 @@ function Navbar(props) {
         </Toolbar>
       </AppBar>
     </HideOnScroll>
-  );
+  )
 };
 
-export default Navbar;
+export default Navbar