Add dark mode support with persisted OS-aware theme selection

frontend/src/App.tsx

@@ -22,8 +22,9 @@
 import { lazy, Suspense } from "react";
 import { FluentProvider, Spinner } from "@fluentui/react-components";
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
-import { lightTheme } from "./theme/customTheme";
+import { darkTheme, lightTheme } from "./theme/customTheme";
 import { AuthProvider } from "./providers/AuthProvider";
+import { ThemeProvider, useThemeMode } from "./providers/ThemeProvider";
 import { TimezoneProvider } from "./providers/TimezoneProvider";
 import { RequireAuth } from "./components/RequireAuth";
 import { SetupGuard } from "./components/SetupGuard";
@@ -43,9 +44,12 @@ const BlocklistsPage = lazy(() => import("./pages/BlocklistsPage").then((m) => (
 /**
  * Root application component — mounts providers and top-level routes.
  */
-function App(): React.JSX.Element {
+function AppContents(): React.JSX.Element {
+  const { colorMode } = useThemeMode();
+  const theme = colorMode === "dark" ? darkTheme : lightTheme;
+
   return (
-    <FluentProvider theme={lightTheme}>
+    <FluentProvider theme={theme}>
       <ErrorBoundary>
         <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
           <Suspense fallback={<Spinner size="large" label="Loading…" />}>
@@ -96,4 +100,12 @@ function App(): React.JSX.Element {
   );
 }
 
+function App(): React.JSX.Element {
+  return (
+    <ThemeProvider>
+      <AppContents />
+    </ThemeProvider>
+  );
+}
+
 export default App;