feat(ui): add light theme toggle

tests/e2e/dashboard.spec.ts

@@ -209,6 +209,16 @@ test.describe("dashboard page QA gate", () => {
     await waitForDashboardReady(page);
 
     await expect(page.getByRole("main")).toHaveCount(1);
+    await page.keyboard.press("Tab");
+    const themeToggle = page.getByRole("button", {
+      name: "Switch to light theme",
+    });
+    await expect(themeToggle).toBeFocused();
+    const themeFocusBoxShadow = await themeToggle.evaluate((element) => {
+      return window.getComputedStyle(element).boxShadow;
+    });
+    expect(themeFocusBoxShadow).not.toBe("none");
+
     for (const serviceId of linkedServiceIds) {
       await page.keyboard.press("Tab");
 
@@ -255,6 +265,29 @@ test.describe("dashboard page QA gate", () => {
       0.01,
     );
   });
+
+  test("toggles the dashboard between dark and light themes", async ({ page }) => {
+    await page.goto("/");
+    await waitForDashboardReady(page);
+
+    await expect(page.locator("html")).toHaveAttribute("data-ui-theme", "dark");
+
+    const switchToLight = page.getByRole("button", {
+      name: "Switch to light theme",
+    });
+    await expect(switchToLight).toBeVisible();
+    await switchToLight.click();
+
+    await expect(page.locator("html")).toHaveAttribute("data-ui-theme", "light");
+    await expect(
+      page.getByRole("button", { name: "Switch to dark theme" }),
+    ).toBeVisible();
+
+    await page.reload();
+    await waitForDashboardReady(page);
+
+    await expect(page.locator("html")).toHaveAttribute("data-ui-theme", "light");
+  });
 });
 
 async function waitForDashboardReady(page: Page): Promise<void> {