style : appBar color

src/sections/engineSettings/engineSettingsDialog.tsx

@@ -183,7 +183,7 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
       </DialogContent>
       <DialogActions sx={{ m: 1 }}>
         <Button variant="contained" onClick={onClose}>
-          Done
+          Close
         </Button>
       </DialogActions>
     </Dialog>

src/sections/layout/NavBar.tsx

@@ -27,7 +27,11 @@ export default function NavBar({ darkMode, switchDarkMode }: Props) {
     <Box sx={{ flexGrow: 1, display: "flex" }}>
       <AppBar
         position="static"
-        sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        sx={{
+          zIndex: (theme) => theme.zIndex.drawer + 1,
+          backgroundColor: darkMode ? "#19191c" : "white",
+          color: darkMode ? "white" : "black",
+        }}
         enableColorOnDark
       >
         <Toolbar>

src/sections/layout/index.tsx

@@ -5,13 +5,13 @@ import { red } from "@mui/material/colors";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 
 export default function Layout({ children }: PropsWithChildren) {
-  const [useDarkMode, setDarkMode] = useLocalStorage("useDarkMode", true);
+  const [isDarkMode, setDarkMode] = useLocalStorage("useDarkMode", true);
 
   const theme = useMemo(
     () =>
       createTheme({
         palette: {
-          mode: useDarkMode ? "dark" : "light",
+          mode: isDarkMode ? "dark" : "light",
           error: {
             main: red[400],
           },
@@ -19,20 +19,20 @@ export default function Layout({ children }: PropsWithChildren) {
             main: "#5d9948",
           },
           secondary: {
-            main: useDarkMode ? "#424242" : "#ffffff",
+            main: isDarkMode ? "#424242" : "#ffffff",
           },
         },
       }),
-    [useDarkMode]
+    [isDarkMode]
   );
 
-  if (useDarkMode === null) return null;
+  if (isDarkMode === null) return null;
 
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <NavBar
-        darkMode={useDarkMode}
+        darkMode={isDarkMode}
         switchDarkMode={() => setDarkMode((val) => !val)}
       />
       <main style={{ margin: "3vh 2vw" }}>{children}</main>