theme

index.html

@@ -5,6 +5,14 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Dashfront</title>
+    <style>
+      html,
+      body,
+      #root {
+        min-height: 100%;
+        background-color: #dceeea;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>

src/App.jsx

@@ -18,6 +18,7 @@ export default function App() {
           alignItems: 'center',
           justifyContent: 'center',
           minHeight: '100vh',
+          bgcolor: 'background.default',
         }}
       >
         <CircularProgress />

src/colors.js

@@ -0,0 +1,2 @@
+// Mirrored in index.html and index.css for paint before JS loads.
+export const MAIN_BACKGROUND = '#dceeea';

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

src/index.css

@@ -0,0 +1,6 @@
+html,
+body,
+#root {
+  min-height: 100%;
+  background-color: #dceeea;
+}

src/main.jsx

@@ -1,13 +1,11 @@
 import { createRoot } from 'react-dom/client';
 import CssBaseline from '@mui/material/CssBaseline';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { ThemeProvider } from '@mui/material/styles';
 import { SnackbarProvider } from 'notistack';
 import AuthProvider from './auth/AuthProvider';
 import App from './App';
-
-const theme = createTheme({
-  palette: { mode: 'light', primary: { main: '#3b5bdb' } },
-});
+import theme from './theme';
+import './index.css';
 
 createRoot(document.getElementById('root')).render(
   <ThemeProvider theme={theme}>

src/theme.js

@@ -0,0 +1,25 @@
+import { createTheme } from '@mui/material/styles';
+import { MAIN_BACKGROUND } from './colors';
+
+const nav = {
+  background: '#1a3533',
+  mainBackground: MAIN_BACKGROUND,
+  item: '#9cb8b4',
+  itemHover: '#243f3d',
+  itemHoverText: '#d4ebe8',
+  itemActive: '#2a5a56',
+  itemActiveText: '#6ee7d8',
+  itemActiveAccent: '#2dd4bf',
+};
+
+export default createTheme({
+  palette: {
+    mode: 'light',
+    primary: { main: '#0d9488' },
+    background: {
+      default: nav.mainBackground,
+      paper: '#ffffff',
+    },
+  },
+  nav,
+});