Add dark mode support with persisted OS-aware theme selection

Docs/Tasks.md

@@ -433,7 +433,9 @@ const source = timeRange === "24h" ? "fail2ban" : "archive";
 
 ---
 
-### TASK-022 — Add dark mode support and OS preference detection
+### TASK-022 — Add dark mode support and OS preference detection (done)
+
+**Where fixed:** `frontend/src/App.tsx`, `frontend/src/providers/ThemeProvider.tsx`, `frontend/src/layouts/MainLayout.tsx`, `frontend/src/theme/customTheme.ts`, `frontend/src/components/BanTrendChart.tsx`, `frontend/src/components/TopCountriesPieChart.tsx`, `frontend/src/components/TopCountriesBarChart.tsx`, `frontend/src/components/JailDistributionChart.tsx`, `Docs/Web-Design.md`
 
 **Where found:** `frontend/src/App.tsx` line 25 — `<FluentProvider theme={lightTheme}>` is hardcoded. `frontend/src/theme/customTheme.ts` already exports `darkTheme` but it is never used.
 

Docs/Web-Design.md

@@ -41,6 +41,7 @@ BanGUI uses a **single custom theme** generated with the [Fluent UI Theme Design
 
 - The primary colour must have a **contrast ratio of at least 4.5 : 1** against `white` for text and **3 : 1** for large text and UI elements.
 - Provide a **dark theme variant** alongside the default light theme. Both must share the same semantic slot names — only the palette values differ.
+- Persist the user's explicit theme choice in `localStorage` and otherwise follow the operating system's `prefers-color-scheme` setting.
 - Never reference Fluent UI palette slots (`themeDarker`, `neutralLight`, etc.) directly in components. Always go through semantic slots so theme switching works seamlessly.
 
 ### Colour Rules