color pallete

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,