color pallete

src/Dashboard.tsx

@@ -29,6 +29,20 @@ export default function Dashboard() {
     expense: [],
     income: []
   });
+  const palette = {
+  expense: {
+      primary: "#d32f2f",
+      light: "#fdecea",
+      dark: "#9a0007",
+      text: "#b71c1c"
+    },
+    income: {
+      primary: "#2e7d32",
+      light: "#e8f5e9",
+      dark: "#1b5e20",
+      text: "#1b5e20"
+    }
+  };
 
   const [aggregated, setAggregated] = React.useState<{
     expense: AggregatedDashboardData | null;
@@ -45,6 +59,7 @@ export default function Dashboard() {
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | null>(null);
 
+  const colors = palette[mode];
   // -------- LOAD ONCE --------
   React.useEffect(() => {
     async function loadData() {
@@ -112,13 +127,35 @@ export default function Dashboard() {
   }
 
   return (
-    <Container sx={{ mt: 4, mb: 4 }}>
+    <Container
+      sx={{
+        mt: 4,
+        mb: 4,
+        background: `linear-gradient(180deg, ${colors.light} 0%, transparent 100%)`,
+        borderRadius: 4,
+        p: 2
+      }}
+    >
       {/* -------- TOGGLE -------- */}
       <Box sx={{ display: "flex", justifyContent: "center", mb: 3 }}>
         <ToggleButtonGroup
           value={mode}
           exclusive
           onChange={(_, val) => val && setMode(val)}
+          sx={{
+            borderRadius: 3,
+            overflow: "hidden",
+            "& .MuiToggleButton-root": {
+              px: 3,
+              textTransform: "none",
+              color: "text.secondary"
+            },
+            "&.Mui-selected": {
+              bgcolor: colors.primary,
+              color: "white",
+              borderColor: colors.primary
+            },
+          }}
         >
           <ToggleButton value="expense">Expenses</ToggleButton>
           <ToggleButton value="income">Income</ToggleButton>
@@ -137,6 +174,7 @@ export default function Dashboard() {
             onPeriodChange={setPeriod}
             comparison={comparison}
             setComparison={setComparison}
+            colorScheme={colors}
           />
         </Grid>
 
@@ -145,6 +183,7 @@ export default function Dashboard() {
             title={`Recent ${mode === "expense" ? "Expenses" : "Income"}`}
             items={currentLatest}
             onViewAll={() => {}}
+            accentColor={colors.primary}
           />
         </Grid>