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>
 

src/components/HistoryChart.tsx

@@ -72,6 +72,7 @@ export default function HistoryChart({
   onPeriodChange,
   comparison,
   setComparison,
+  colorScheme,
 }: HistoryChartProps) {
   const [activeTab, setActiveTab] = React.useState<string>(tabs[0] || "");
 
@@ -141,10 +142,11 @@ export default function HistoryChart({
         width: "100%",
         boxShadow: "none",
         border: "1px solid",
-        borderColor: "divider"
+        borderColor: "divider",
+        bgcolor: colorScheme.light,
       }}
     >
-      <Typography variant="h6" fontWeight={700} gutterBottom>
+      <Typography variant="h6" fontWeight={700} gutterBottom color={colorScheme.text}>
         {header}
       </Typography>
 
@@ -296,7 +298,7 @@ export default function HistoryChart({
                         sx={{
                           width: 6,
                           height: `${compareHeight}%`,
-                          bgcolor: "grey.400",
+                          bgcolor: `${colorScheme.primary}55`,
                           borderRadius: 2
                         }}
                       />
@@ -310,7 +312,9 @@ export default function HistoryChart({
                       sx={{
                         width: 10,
                         height: `${currentHeight}%`,
-                        bgcolor: point.highlighted ? "error.main" : "primary.main",
+                        bgcolor: point.highlighted
+                          ? colorScheme.primary
+                          : `${colorScheme.primary}99`,
                         borderRadius: 2
                       }}
                     />

src/components/LatestItemsList.tsx

@@ -24,12 +24,14 @@ export interface LatestItemsListProps {
   title?: string;
   items: LatestItem[];
   onViewAll?: () => void;
+  accentColor: any;
 }
 
 export default function LatestItemsList({
   title = "Recent Transactions",
   items,
   onViewAll,
+  accentColor,
 }: LatestItemsListProps) {
   return (
     <Box sx={{ width: "100%", bgcolor: "background.paper", borderRadius: 4, p: 2 }}>
@@ -69,7 +71,7 @@ export default function LatestItemsList({
               <Avatar
                 variant="rounded"
                 sx={{
-                  bgcolor: item.iconBgColor || "grey.200",
+                  bgcolor: `${accentColor}22`,
                   color: "inherit",
                   width: 48,
                   height: 48,

src/types/historyChart.ts

@@ -33,4 +33,5 @@ export interface HistoryChartProps {
   onPeriodChange: (mode: "rolling" | "calendar") => void;
   comparison: boolean;
   setComparison: (mode: boolean) => void;
+  colorScheme: any;
 }