Setup and add initial Dark Mode visual regression test screenshots #4305
Labels
🤖 aspect: dx
Concerns developers' experience with the codebase
✨ goal: improvement
Improvement to an existing user-facing feature
🟨 priority: medium
Not blocking but should be addressed soon
🧱 stack: frontend
Related to the Nuxt frontend
⛔ status: blocked
Blocked & therefore, not ready for work
Milestone
Important
This issue is blocked until #4303 and #4304 are completed.
Description
Once the dark mode palette is added and can be forced via feature flag, update our visual regression tests to create new dark mode snapshots. Existing screenshots should be renamed to <snapshot_name>_light and the new dark mode screenshots should be named <snapshot_name>_dark.
For setting dark mode in the tests, update
frontend/test/playwright/utils/breakpoints.ts
so that each breakpoint produces and expects a dark mode screenshot to pass as well as the existing light mode screenshot. Emulating dark mode can be easily handled via Playwright's emulation controls.This will produce a large file diff. When this PR lands @fcoveram and @WordPress/openverse-frontend should review the full dark mode appearance for correctness and sufficient color contrast (see the “Accessibility” section for more details).
The text was updated successfully, but these errors were encountered: