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
                       }}
                     />