Initial curated ITWorx_MCP_Hub source from 368fba691ea8d23403b4d56b53b5ec670d7c5020

apps/web/tests/e2e/theme.spec.ts

@@ -0,0 +1,41 @@
+import { expect, loginAs, test } from "./fixtures";
+
+// Playwright's default browser color-scheme emulation is "light", which
+// would make styles.css's `@media (prefers-color-scheme: light)` block
+// apply even with no `data-theme` attribute set, collapsing the "dark"
+// and "light" reads below into the same value. Pin the emulated OS
+// preference to dark so the initial (no localStorage) state is
+// deterministic and the toggle's own explicit `data-theme` write -- not
+// an OS-preference coincidence -- is what the test is proving out.
+test.use({ colorScheme: "dark" });
+
+test.describe("theme toggle", () => {
+  test("switching to light theme persists across reload and changes the rendered background", async ({ page }) => {
+    await loginAs(page, "hub-viewer");
+    await page.goto("/settings");
+    const darkBackground = await page.evaluate(() => getComputedStyle(document.documentElement).backgroundColor);
+    await page.getByRole("button", { name: "Light" }).click();
+    const lightBackground = await page.evaluate(() => getComputedStyle(document.documentElement).backgroundColor);
+    expect(lightBackground).not.toBe(darkBackground);
+    await page.reload();
+    const afterReload = await page.evaluate(() => getComputedStyle(document.documentElement).backgroundColor);
+    expect(afterReload).toBe(lightBackground);
+    await page.getByRole("button", { name: "Dark" }).click();
+  });
+
+  test("appearance toggle exposes which theme is selected, not just the applied state", async ({ page }) => {
+    // Regression test alongside the density toggle fix: SettingsPage had no
+    // state tracking the current theme at all, so Dark/Light always
+    // rendered as the same solid pill regardless of which was active.
+    await loginAs(page, "hub-viewer");
+    await page.goto("/settings");
+    const dark = page.getByRole("button", { name: "Dark" });
+    const light = page.getByRole("button", { name: "Light" });
+    await expect(dark).toHaveAttribute("aria-pressed", "true");
+    await expect(light).toHaveAttribute("aria-pressed", "false");
+    await light.click();
+    await expect(dark).toHaveAttribute("aria-pressed", "false");
+    await expect(light).toHaveAttribute("aria-pressed", "true");
+    await dark.click();
+  });
+});