u

src/client/App.js

@@ -2,15 +2,40 @@ import React from 'react';
 import { ThemeProvider, createTheme, CssBaseline, AppBar, Toolbar, Typography, Container, Box } from '@mui/material';
 import Dashboard from './Dashboard';
 
+// Gruvbox Dark color palette
+const gruvboxDark = {
+    bg0: '#282828',      // background
+    bg1: '#3c3836',      // lighter background (cards)
+    bg2: '#504945',      // selection / borders
+    fg: '#ebdbb2',       // foreground
+    fg2: '#d5c4a1',      // secondary text
+    aqua: '#8ec07c',     // primary accent
+    orange: '#fe8019',   // secondary accent
+    red: '#fb4934',
+    green: '#b8bb26',
+    yellow: '#fabd2f',
+    blue: '#83a598',
+    purple: '#d3869b',
+};
+
 const darkTheme = createTheme({
     palette: {
-        mode: 'light',
+        mode: 'dark',
         primary: {
-            main: '#2c3e50',
+            main: gruvboxDark.aqua,
+        },
+        secondary: {
+            main: gruvboxDark.orange,
         },
         background: {
-            default: '#f4f4f9',
+            default: gruvboxDark.bg0,
+            paper: gruvboxDark.bg1,
         },
+        text: {
+            primary: gruvboxDark.fg,
+            secondary: gruvboxDark.fg2,
+        },
+        divider: gruvboxDark.bg2,
     },
 });