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,
     },
 });
 

src/client/ControllerCard.js

@@ -50,18 +50,18 @@ export default function ControllerCard({ controllerName, ports, range }) {
             <CardHeader
                 title={controllerName}
                 titleTypographyProps={{ variant: 'h5', fontWeight: 'bold', color: 'primary.main' }}
-                sx={{ bgcolor: '#e9ecef', borderLeft: '6px solid #2c3e50' }}
+                sx={{ bgcolor: 'background.paper', borderLeft: '6px solid', borderLeftColor: 'primary.main' }}
             />
             <CardContent>
                 {/* Environment Chart */}
-                <Box sx={{ height: 350, mb: 4 }}>
+                <Box sx={{ height: 350, mb: 6 }}>
                     <Typography variant="h6" color="text.secondary" gutterBottom>
                         Environment (Temp / Humidity)
                     </Typography>
                     <EnvChart data={envData} range={range} />
                 </Box>
 
-                <Divider sx={{ mb: 3 }} />
+                <Divider sx={{ mt: 2, mb: 3 }} />
 
                 {/* Port Grid */}
                 <Grid container spacing={3}>
@@ -72,7 +72,7 @@ export default function ControllerCard({ controllerName, ports, range }) {
 
                         return (
                             <Grid size={{ xs: 12, md: 6, lg: 4 }} key={port.port}>
-                                <Card variant="outlined" sx={{ bgcolor: '#f8f9fa' }}>
+                                <Card variant="outlined" sx={{ bgcolor: 'background.paper' }}>
                                     <CardContent>
                                         <Typography variant="h6" gutterBottom>
                                             {port.port_name || `Port ${port.port}`}

src/client/EnvChart.js

@@ -43,8 +43,8 @@ export default function EnvChart({ data, range }) {
                 borderColor: '#ff6384',
                 backgroundColor: '#ff6384',
                 yAxisID: 'y',
-                tension: 0.3,
+                tension: 0.4,
-                pointRadius: 1,
+                pointRadius: 0,
                 borderWidth: 2
             },
             {
@@ -53,8 +53,8 @@ export default function EnvChart({ data, range }) {
                 borderColor: '#36a2eb',
                 backgroundColor: '#36a2eb',
                 yAxisID: 'y1',
-                tension: 0.3,
+                tension: 0.4,
-                pointRadius: 1,
+                pointRadius: 0,
                 borderWidth: 2
             },
         ],

src/client/LevelChart.js

@@ -47,8 +47,9 @@ export default function LevelChart({ data, isLight, isCO2, range }) {
                 borderColor: levelColor,
                 backgroundColor: levelColor,
                 stepped: !isCO2, // CO2 uses smooth lines
+                tension: isCO2 ? 0.4 : 0, // Smooth for CO2, stepped for others
                 borderWidth: 2,
-                pointRadius: 1
+                pointRadius: 0
             },
         ],
     };