Add dark mode support with persisted OS-aware theme selection

frontend/src/components/BanTrendChart.tsx

@@ -25,6 +25,7 @@ import {
   CHART_PALETTE,
   resolveFluentToken,
 } from "../utils/chartTheme";
+import { useThemeMode } from "../providers/ThemeProvider";
 import { ChartStateWrapper } from "./ChartStateWrapper";
 import { useBanTrend } from "../hooks/useBanTrend";
 import type { BanOriginFilter, TimeRange } from "../types/ban";
@@ -200,29 +201,36 @@ export const BanTrendChart = memo(function BanTrendChart({
   source = "fail2ban",
 }: BanTrendChartProps): React.JSX.Element {
   const styles = useStyles();
+  const { colorMode } = useThemeMode();
   const { buckets, loading, error, reload } = useBanTrend(timeRange, origin, source);
 
   const isEmpty = buckets.every((b) => b.count === 0);
   const entries = buildEntries(buckets, timeRange);
   const { primaryColour, axisColour, gridColour } = useMemo(
-    () => ({
-      primaryColour: resolveFluentToken(CHART_PALETTE[0] ?? ""),
-      axisColour: resolveFluentToken(CHART_AXIS_TEXT_TOKEN),
-      gridColour: resolveFluentToken(CHART_GRID_LINE_TOKEN),
-    }),
-    [],
+    () => {
+      void colorMode;
+      return {
+        primaryColour: resolveFluentToken(CHART_PALETTE[0] ?? ""),
+        axisColour: resolveFluentToken(CHART_AXIS_TEXT_TOKEN),
+        gridColour: resolveFluentToken(CHART_GRID_LINE_TOKEN),
+      };
+    },
+    [colorMode],
   );
   const tickInterval = TICK_INTERVAL[timeRange];
 
   const tooltipContent = useMemo(
-    () => (
-      <TrendTooltip
-        backgroundColor={resolveFluentToken(tokens.colorNeutralBackground1)}
-        borderColor={resolveFluentToken(tokens.colorNeutralStroke2)}
-        textColor={resolveFluentToken(tokens.colorNeutralForeground1)}
-      />
-    ),
-    [],
+    () => {
+      void colorMode;
+      return (
+        <TrendTooltip
+          backgroundColor={resolveFluentToken(tokens.colorNeutralBackground1)}
+          borderColor={resolveFluentToken(tokens.colorNeutralStroke2)}
+          textColor={resolveFluentToken(tokens.colorNeutralForeground1)}
+        />
+      );
+    },
+    [colorMode],
   );
 
   return (