Add dark mode support with persisted OS-aware theme selection

frontend/src/components/TopCountriesPieChart.tsx

@@ -17,6 +17,7 @@ import type { LegendPayload } from "recharts/types/component/DefaultLegendConten
 import type { TooltipContentProps } from "recharts/types/component/Tooltip";
 import { tokens, makeStyles, Text } from "@fluentui/react-components";
 import { CHART_PALETTE, resolveFluentToken } from "../utils/chartTheme";
+import { useThemeMode } from "../providers/ThemeProvider";
 import { ChartTooltip } from "./ChartTooltip";
 
 // ---------------------------------------------------------------------------
@@ -134,10 +135,14 @@ export const TopCountriesPieChart = memo(function TopCountriesPieChart({
   countryNames,
 }: TopCountriesPieChartProps): React.JSX.Element {
   const styles = useStyles();
+  const { colorMode } = useThemeMode();
 
   const resolvedPalette = useMemo(
-    () => CHART_PALETTE.map(resolveFluentToken),
-    [],
+    () => {
+      void colorMode;
+      return CHART_PALETTE.map(resolveFluentToken);
+    },
+    [colorMode],
   );
   const slices = buildSlices(countries, countryNames, resolvedPalette);
   const total = slices.reduce((sum, s) => sum + s.value, 0);