theme changes

src/components/Dashboard/Dashboard.view.tsx

@@ -7,6 +7,7 @@ import {
   ToggleButton,
   ToggleButtonGroup
 } from "@mui/material";
+import { useTheme, alpha } from "@mui/material/styles";
 import { DashboardProps, DashboardState } from "./Dashboard.models";
 
 interface ViewProps extends DashboardProps {
@@ -22,8 +23,31 @@ export default function DashboardView({
   setState,
   onModeChange
 }: ViewProps) {
+  const theme = useTheme();
+  const themeMode = theme.palette.mode;
   const { mode, period, comparison } = state;
-  const colors = config.style?.palette[mode] || { primary: '#000', light: '#fff' };
+
+  // Resolve colors with fallbacks
+  const colors = React.useMemo(() => {
+    const palette = config.style?.palette?.[mode];
+    const modeColors = palette ? palette[themeMode] : null;
+
+    if (modeColors) {
+      return {
+        primary: modeColors.primary,
+        light: modeColors.background || alpha(modeColors.primary, 0.1),
+        text: modeColors.text || (themeMode === 'light' ? theme.palette.text.primary : '#fff')
+      };
+    }
+
+    // Fallback to standard theme colors
+    const themeColor = mode === 'expense' ? theme.palette.error : theme.palette.success;
+    return {
+      primary: themeColor.main,
+      light: alpha(themeColor.main, themeMode === 'light' ? 0.08 : 0.15),
+      text: themeColor.main
+    };
+  }, [config.style?.palette, mode, themeMode, theme.palette]);
 
   const handleModeChange = (_: any, newMode: any) => {
     if (newMode && onModeChange) {
@@ -39,7 +63,8 @@ export default function DashboardView({
         mb: 4,
         background: `linear-gradient(180deg, ${colors.light} 0%, transparent 100%)`,
         borderRadius: 4,
-        p: 2
+        p: 2,
+        transition: 'background 0.3s ease'
       }}
     >
       <Box sx={{ display: "flex", justifyContent: "center", mb: 3 }}>