Background
In T366362 we restricted dark mode styles to the screen media and updated our recommendations on https://www.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis
This means all existing usages need to be updated.
User story
As a reader, I do not want dark mode styles leaking into printed content.
Requirements
- https://codesearch.wmcloud.org/deployed/?q=%40media+%5C%28+prefers-color-scheme%3A+dark yields no results (It's okay if Flow is still there)
Requirement
Verify that the CSS media query for prefers-color-scheme: dark is not present in the deployed code, except potentially within the Flow extension. This ensures that dark mode styles are not applied when printing, and the printed output remains in light mode.
To validate this, perform a search across the deployed codebase to confirm that @media (prefers-color-scheme: dark) yields no results outside of the Flow extension.
BDD
Given that dark mode is enabled, When the user prints a page, Then the printed media should appear in light mode with no dark mode styles applied. Given that the deployed code is reviewed, When a search is performed for the `@media (prefers-color-scheme: dark)` CSS query, Then the query should yield no results outside of the Flow extension.
Test Steps
Test Case 1: Verify the absence of dark mode styles in the deployed code
- Perform a search in the deployed codebase using the link: https://codesearch.wmcloud.org/deployed/?q=%40media+%5C%28+prefers-color-scheme%3A+dark.
- AC1: Confirm that the search yields no results, except potentially within the Flow extension.
Test Case 2: Verify that print preview displays in light mode for multiple namespaces
- Enable dark mode in the user's settings.
- Navigate to the main page.
- Open the print preview for the page.
- AC2: The print preview should appear in light mode.
- Repeat steps 2-4 for the article namespace, talk page, and special page.
- AC3: Verify that the print preview in each of these namespaces also appears in light mode, regardless of dark mode being enabled on the screen.
Design
- Add mockups and design requirements
Acceptance criteria
In general, pages should always appear in light-mode when printing. Dark-mode should be limited to screens. Although the changes span multiple repos, this behavior can be verified by looking at the print preview for multiple namespace.
- On beta, verify that the print preview for multiple namespaces is in light mode. Check main page, article namespace, talk page, special page.
Communication criteria - does this need an announcement or discussion?
- Add communication criteria
Rollback plan
- What is the rollback plan in production for this task if something goes wrong?
This task was created by Version 1.0.0 of the Web team task template using phabulous
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T371331#10060284 |
| 2 | ✅ | T371331#10060284 |
| 3 | ✅ | T371331#10060284 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T371331#10097479 |
| 2 | ✅ | T371331#10097479 |
| 3 | ✅ | T371331#10097479 |
