mirror of
https://github.com/block/buzz.git
synced 2026-08-18 06:50:31 +02:00
mikeyandGitHub
be275cfc6c
## Problem With macOS in dark mode (the default for fresh profiles is to follow the system scheme), the onboarding "What's an identity key?" help dialog renders its title in near-white on the always-white textured card, making it unreadable. The body paragraphs stay readable because they use the fixed olive `--buzz-onboarding-backup-ink`; only the `text-foreground` title (and the close button's hover color) flip with the theme. ## Cause The dialog's `DialogContent` carries `buzz-onboarding-neutral-theme` but is portaled outside the `buzz-startup-shell` subtree, so in dark mode it matches `.dark .buzz-onboarding-neutral-theme:not(.buzz-startup-shell)` (`components.css`), which flips `--foreground` to `0 0% 98%`. The textured powder card (`buzz-card-textured`) has no dark variant — it is baked light — so the near-white title disappears against it. ## Fix One attribute: pin the dialog to the light neutral theme with `data-system-color-scheme="light"`. This is the established pattern for always-light onboarding dialogs (`HostedCommunityOnboarding.tsx`, the `CommunityOnboardingFlow.tsx` avatar dialog), and the pinned-light CSS rule already exists and out-specifies the dark-mode flip. No new CSS. ## Testing - Added a dark-mode regression test to `tests/e2e/identity-key-help.spec.ts` (already registered in the Playwright smoke project): emulates `prefers-color-scheme: dark`, opens the dialog, and asserts the title resolves to the pinned light-neutral ink `rgb(23, 23, 23)`. Before the fix it rendered `rgb(250, 250, 250)`. - Manual repro: macOS appearance set to Dark → fresh profile → machine onboarding → click "What's an identity key?". Before/after screenshots are in the comment below. Signed-off-by: Michael Pfister <pfista@gmail.com>