theme

src/components/AppShell.jsx

@@ -11,16 +11,16 @@ const SIDEBAR_WIDTH = 240;
 
 export default function AppShell() {
   return (
-    <Box sx={{ display: 'flex', minHeight: '100vh', bgcolor: 'grey.50' }}>
+    <Box sx={{ display: 'flex', minHeight: '100vh', bgcolor: 'background.default' }}>
       <Box
         component="nav"
-        sx={{
+        sx={(theme) => ({
           width: SIDEBAR_WIDTH,
           flexShrink: 0,
           display: 'flex',
           flexDirection: 'column',
-          bgcolor: 'background.paper',
-        }}
+          bgcolor: theme.nav.background,
+        })}
       >
         <List disablePadding sx={{ flexGrow: 1 }}>
           {NAV_ITEMS.map(({ path, label, icon: Icon }) => (
@@ -29,11 +29,24 @@ export default function AppShell() {
               component={NavLink}
               to={path}
               end={path === '/'}
-              sx={{
+              sx={(theme) => ({
                 borderRadius: 0,
                 px: 2,
-                '&.active': { bgcolor: 'action.selected' },
-              }}
+                py: 1.25,
+                color: theme.nav.item,
+                '& .MuiListItemIcon-root': { color: 'inherit' },
+                '&:hover': {
+                  bgcolor: theme.nav.itemHover,
+                  color: theme.nav.itemHoverText,
+                },
+                '&.active': {
+                  bgcolor: theme.nav.itemActive,
+                  color: theme.nav.itemActiveText,
+                  fontWeight: 600,
+                  borderLeft: `3px solid ${theme.nav.itemActiveAccent}`,
+                  pl: '13px',
+                },
+              })}
             >
               <ListItemIcon sx={{ minWidth: 40 }}>
                 <Icon />
@@ -46,7 +59,15 @@ export default function AppShell() {
         <UserMenu />
       </Box>
 
-      <Box component="main" sx={{ flexGrow: 1, py: 4, px: 3 }}>
+      <Box
+        component="main"
+        sx={(theme) => ({
+          flexGrow: 1,
+          py: 4,
+          px: 3,
+          bgcolor: theme.nav.mainBackground,
+        })}
+      >
         <Outlet />
       </Box>
     </Box>

src/components/LoginPage.jsx

@@ -37,7 +37,7 @@ export default function LoginPage() {
         alignItems: 'center',
         justifyContent: 'center',
         minHeight: '100vh',
-        bgcolor: 'grey.100',
+        bgcolor: 'background.default',
       }}
     >
       <Button