FEAT use ThemeProvider instead of boolean for theme (#1991)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: hannahwestra25 <hannahwestra@users.noreply.github.com>

Author: 3 people

frontend/e2e/accessibility.spec.ts

@@ -55,8 +55,8 @@ test.describe("Accessibility", () => {
     const configBtn = page.getByTitle("Configuration");
     await expect(configBtn).toBeVisible();
 
-    // Theme toggle button
-    const themeBtn = page.getByTitle(/light mode|dark mode/i);
+    // Theme toggle button (now a menu trigger with "Theme: <mode>" title)
+    const themeBtn = page.getByTitle(/^Theme:/);
     await expect(themeBtn).toBeVisible();
   });
 

frontend/e2e/chat.spec.ts

@@ -175,21 +175,21 @@ test.describe("Theme Toggle", () => {
     await page.goto("/");
     await expect(page.getByTitle("Chat")).toBeVisible({ timeout: 10000 });
 
-    // The app defaults to dark mode, so the toggle button title should say "Light Mode"
-    const themeBtn = page.getByTitle("Light Mode");
+    // The app defaults to system mode, so the toggle button title should say "Theme: System"
+    const themeBtn = page.getByTitle("Theme: System");
     await expect(themeBtn).toBeVisible();
 
-    // Click to switch to light mode
+    // Open the theme menu and select Light
     await themeBtn.click();
+    await page.getByRole("menuitemradio", { name: "Light" }).click();
 
-    // Now the button title should change to "Dark Mode"
-    await expect(page.getByTitle("Dark Mode")).toBeVisible({ timeout: 5000 });
-    // The old title should no longer be present
-    await expect(page.getByTitle("Light Mode")).not.toBeVisible();
+    // Now the button title should say "Theme: Light"
+    await expect(page.getByTitle("Theme: Light")).toBeVisible({ timeout: 5000 });
 
-    // Click again to switch back to dark mode
-    await page.getByTitle("Dark Mode").click();
-    await expect(page.getByTitle("Light Mode")).toBeVisible({ timeout: 5000 });
+    // Open the menu again and select Dark
+    await page.getByTitle("Theme: Light").click();
+    await page.getByRole("menuitemradio", { name: "Dark" }).click();
+    await expect(page.getByTitle("Theme: Dark")).toBeVisible({ timeout: 5000 });
   });
 });
 

frontend/src/App.test.tsx

@@ -6,6 +6,8 @@
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import App from "./App";
+import { ThemeProvider } from "./hooks/useTheme";
+
 import { attacksApi } from "./services/api";
 
 const mockGetActiveAccount = jest.fn();
@@ -80,22 +82,15 @@ jest.mock("./components/Labels/LabelsBar", () => {
 jest.mock("./components/Layout/MainLayout", () => {
   const MockMainLayout = ({
     children,
-    onToggleTheme,
-    isDarkMode,
     currentView,
     onNavigate,
   }: {
     children: React.ReactNode;
-    onToggleTheme: () => void;
-    isDarkMode: boolean;
     currentView: string;
     onNavigate: (view: string) => void;
   }) => {
     return (
-      <div data-testid="main-layout" data-dark-mode={isDarkMode} data-current-view={currentView}>
-        <button onClick={onToggleTheme} data-testid="toggle-theme">
-          Toggle Theme
-        </button>
+      <div data-testid="main-layout" data-current-view={currentView}>
         <button onClick={() => onNavigate("home")} data-testid="nav-home">
           Home
         </button>
@@ -289,15 +284,18 @@ describe("App", () => {
   // initialPath lets a test deep-link straight to a view (e.g. "/config").
   function renderApp(initialPath = "/") {
     return render(
-      <MemoryRouter initialEntries={[initialPath]}>
-        <App />
-      </MemoryRouter>
+      <ThemeProvider>
+        <MemoryRouter initialEntries={[initialPath]}>
+          <App />
+        </MemoryRouter>
+      </ThemeProvider>
     );
   }
 
   beforeEach(() => {
     jest.clearAllMocks();
     mockGetActiveAccount.mockReturnValue(null);
+    window.localStorage.clear();
   });
 
   it("renders with FluentProvider and MainLayout", () => {
@@ -306,35 +304,6 @@ describe("App", () => {
     expect(screen.getByTestId("home-view")).toBeInTheDocument();
   });
 
-  it("starts in dark mode", () => {
-    renderApp();
-    expect(screen.getByTestId("main-layout")).toHaveAttribute(
-      "data-dark-mode",
-      "true"
-    );
-  });
-
-  it("toggles theme when onToggleTheme is called", () => {
-    renderApp();
-
-    expect(screen.getByTestId("main-layout")).toHaveAttribute(
-      "data-dark-mode",
-      "true"
-    );
-
-    fireEvent.click(screen.getByTestId("toggle-theme"));
-    expect(screen.getByTestId("main-layout")).toHaveAttribute(
-      "data-dark-mode",
-      "false"
-    );
-
-    fireEvent.click(screen.getByTestId("toggle-theme"));
-    expect(screen.getByTestId("main-layout")).toHaveAttribute(
-      "data-dark-mode",
-      "true"
-    );
-  });
-
   it("starts in home view", () => {
     renderApp();
 

frontend/src/App.tsx

@@ -1,8 +1,8 @@
 import { useState, useCallback, useEffect, useRef, useMemo } from 'react'
 import { Routes, Route, Navigate, useNavigate, useLocation, useSearchParams, matchPath } from 'react-router-dom'
-import { FluentProvider, webLightTheme, webDarkTheme } from '@fluentui/react-components'
 import { useMsal } from '@azure/msal-react'
 import { Joyride } from 'react-joyride'
+import { useTheme } from './hooks/useTheme'
 import MainLayout from './components/Layout/MainLayout'
 import ChatWindow from './components/Chat/ChatWindow'
 import AttackNotFound from './components/Chat/AttackNotFound'
@@ -94,7 +94,6 @@ function App() {
   const routeConversationId = conversationMatch?.params.conversationId ?? null
   const currentView: ViewName = routeAttackId !== null ? 'chat' : viewFromPath(location.pathname)
 
-  const [isDarkMode, setIsDarkMode] = useState(true)
   const [activeTarget, setActiveTarget] = useState<TargetInstance | null>(null)
   const [globalLabels, setGlobalLabels] = useState<Record<string, string>>({ ...DEFAULT_GLOBAL_LABELS })
 
@@ -310,10 +309,6 @@ function App() {
     navigate(attackPath(openAttackResultId))
   }, [navigate])
 
-  const toggleTheme = () => {
-    setIsDarkMode(!isDarkMode)
-  }
-
   const chatElement = isAttackNotFound || isAttackError ? (
     <AttackNotFound
       attackId={routeAttackId ?? ''}
@@ -341,7 +336,8 @@ function App() {
   )
 
   // Onboarding tour — pass handleNavigate so the tour can switch views between steps
-  const { startTour, hasCompletedTour, tourProps } = useTour(handleNavigate, isDarkMode, currentView)
+  const { resolved } = useTheme()
+  const { startTour, hasCompletedTour, tourProps } = useTour(handleNavigate, resolved === 'dark', currentView)
 
   // Auto-start the tour on first visit
   useEffect(() => {
@@ -354,14 +350,11 @@ function App() {
   return (
     <ErrorBoundary>
       <ConnectionHealthProvider>
-        <FluentProvider theme={isDarkMode ? webDarkTheme : webLightTheme}>
           <Joyride {...tourProps} />
           <ConnectionBannerContainer />
           <MainLayout
             currentView={currentView}
             onNavigate={handleNavigate}
-            onToggleTheme={toggleTheme}
-            isDarkMode={isDarkMode}
             onOpenFeedback={() => setFeedbackOpen(true)}
             onStartTour={startTour}
           >
@@ -423,7 +416,6 @@ function App() {
               }}
             />
           )}
-        </FluentProvider>
       </ConnectionHealthProvider>
     </ErrorBoundary>
   )

frontend/src/components/Layout/MainLayout.test.tsx

@@ -17,19 +17,14 @@ jest.mock("../../services/api", () => ({
 // Mock Navigation to simplify testing
 jest.mock("../Sidebar/Navigation", () => {
   const MockNavigation = ({
-    onToggleTheme,
-    isDarkMode,
     currentView,
     onNavigate,
   }: {
-    onToggleTheme: () => void;
-    isDarkMode: boolean;
     currentView: string;
     onNavigate: (view: string) => void;
   }) => {
     return (
-      <div data-testid="navigation" data-dark-mode={isDarkMode} data-current-view={currentView}>
-        <button onClick={onToggleTheme}>Toggle</button>
+      <div data-testid="navigation" data-current-view={currentView}>
         <button onClick={() => onNavigate("config")}>Config</button>
       </div>
     );
@@ -55,8 +50,6 @@ describe("MainLayout", () => {
   });
 
   const defaultProps = {
-    onToggleTheme: jest.fn(),
-    isDarkMode: false,
     currentView: 'chat' as const,
     onNavigate: jest.fn(),
   };
@@ -145,21 +138,4 @@ describe("MainLayout", () => {
       expect(mockedVersionApi.getVersion).toHaveBeenCalled();
     });
   });
-
-  it("passes theme props to Navigation", async () => {
-    mockedVersionApi.getVersion.mockResolvedValue({ version: "1.0.0" });
-
-    renderWithProvider(
-      <MainLayout {...defaultProps} isDarkMode={true}>
-        <div>Content</div>
-      </MainLayout>
-    );
-
-    const navigation = screen.getByTestId("navigation");
-    expect(navigation).toHaveAttribute("data-dark-mode", "true");
-
-    await waitFor(() => {
-      expect(mockedVersionApi.getVersion).toHaveBeenCalled();
-    });
-  });
 });

frontend/src/components/Layout/MainLayout.tsx

@@ -12,8 +12,6 @@ interface MainLayoutProps {
   children: React.ReactNode
   currentView: ViewName
   onNavigate: (view: ViewName) => void
-  onToggleTheme: () => void
-  isDarkMode: boolean
   onOpenFeedback: () => void
   onStartTour?: () => void
 }
@@ -22,8 +20,6 @@ export default function MainLayout({
   children,
   currentView,
   onNavigate,
-  onToggleTheme,
-  isDarkMode,
   onOpenFeedback,
   onStartTour,
 }: MainLayoutProps) {
@@ -59,8 +55,6 @@ export default function MainLayout({
           <Navigation
             currentView={currentView}
             onNavigate={onNavigate}
-            onToggleTheme={onToggleTheme}
-            isDarkMode={isDarkMode}
             onOpenFeedback={onOpenFeedback}
             onStartTour={onStartTour}
           />