Update mui theme

src/components/navbar/DefaultNavBar.tsx

@@ -138,7 +138,7 @@ export function DefaultNavBar() {
                                 alignItems: 'center',
                             }}
                         >
-                            <IconButton color="inherit" aria-label="open drawer" onClick={() => setIsCollapsed(false)}>
+                            <IconButton aria-label="open drawer" onClick={() => setIsCollapsed(false)}>
                                 <MenuIcon />
                             </IconButton>
                         </Stack>
@@ -157,7 +157,6 @@ export function DefaultNavBar() {
                                 component="button"
                                 sx={{ marginRight: 2 }}
                                 size="large"
-                                color="inherit"
                                 aria-label="menu"
                                 onClick={handleBack}
                             >

src/components/navbar/navigation/DesktopSideBar.tsx

@@ -58,7 +58,14 @@ const NavigationBarItem = ({ path, title, IconComponent, SelectedIconComponent }
             <Tooltip title={t(title)} placement="right">
                 <ListItem sx={listItemProps}>
                     <ListItemIcon sx={listItemIconProps}>
-                        <Icon sx={{ color: isActive ? 'primary.main' : undefined }} />
+                        <Icon
+                            sx={{
+                                color: isActive ? 'primary.dark' : undefined,
+                                ...theme.applyStyles('dark', {
+                                    color: isActive ? 'primary.light' : undefined,
+                                }),
+                            }}
+                        />
                     </ListItemIcon>
                     <ListItemText
                         primary={t(title)}
@@ -69,7 +76,10 @@ const NavigationBarItem = ({ path, title, IconComponent, SelectedIconComponent }
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
                                 ...(isCollapsed ? theme.typography.caption : {}),
-                                color: isActive ? 'primary.main' : undefined,
+                                color: isActive ? 'primary.dark' : undefined,
+                                ...theme.applyStyles('dark', {
+                                    color: isActive ? 'primary.light' : undefined,
+                                }),
                             },
                         }}
                     />

src/components/navbar/navigation/MobileBottomBar.tsx

@@ -40,7 +40,6 @@ export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] })
             elevation={3}
         >
             <BottomNavigation
-                sx={{ backgroundColor: 'custom.light' }}
                 showLabels
                 value={selectedNavBarItem}
                 onChange={(_, newValue: string) => {