diff --git a/desktop/src/features/onboarding/ui/IdentityKeyHelpDialog.tsx b/desktop/src/features/onboarding/ui/IdentityKeyHelpDialog.tsx index e597dfdbd1b..0abcd77cb02 100644 --- a/desktop/src/features/onboarding/ui/IdentityKeyHelpDialog.tsx +++ b/desktop/src/features/onboarding/ui/IdentityKeyHelpDialog.tsx @@ -67,6 +67,7 @@ export function IdentityKeyHelpDialog() { { "1", ); }); + +test("identity key help stays readable when the app resolves dark mode", async ({ + page, +}) => { + await page.emulateMedia({ colorScheme: "dark" }); + await installMockBridge(page, undefined, { + skipCommunitySeed: true, + skipOnboardingSeed: true, + }); + await page.goto("/"); + + // Fresh profiles follow the system scheme, so the emulated dark scheme is + // the first-run repro: the app resolves the dark theme while onboarding. + await expect + .poll(() => + page.evaluate(() => document.documentElement.classList.contains("dark")), + ) + .toBe(true); + + const trigger = page.getByTestId("identity-key-help-trigger"); + await expect(trigger).toHaveCSS("opacity", "1", { timeout: 5000 }); + await trigger.click(); + + const dialog = page.getByTestId("identity-key-help-dialog"); + await expect(dialog).toBeVisible(); + await waitForAnimations(page); + + // The textured powder card is baked light in both themes, so the dialog pins + // the neutral onboarding theme to its light variant. Without the pin the + // dark theme flips --foreground to near-white and the title disappears + // against the white card. + await expect( + dialog.getByRole("heading", { name: "What’s an identity key?" }), + ).toHaveCSS("color", "rgb(23, 23, 23)"); +});