Background: Although Wikipedia's across most languages now have dark-mode, the www.wikipedia.org portal page does not.
User story: As someone using dark-mode on Wikipedia, I would expect that the wikipedia homepage should also work in dark-mode.
Requirements
- The Wikimedia portal pages should appear in dark mode when system settings are set to "dark" mode.
- The Wikimedia portals should import Codex as dependency
- The Wikimedia portals should use Codex design tokens for the dark-mode color palette
Technical notes:
- This scope of this task is to enable "auto" dark-mode on the Wikimedia portals (i.e. the colors should only change base on the prefers-color-scheme media query). Adding functionality for letting users choose the color mode explicitly is out of scope for this task.
- The portals repo currently doesn't import Codex, so this dependency will have to be added via NPM.
- This repo uses PostCSS instead of Less, so it should use the Codex package with native CSS variables instead of the Less variables.
Much of the CSS & HTML in the Wikimedia portals repo is shared between the www.wikipedia.org page and the sister project pages (e.g. www.wiktionary.org) so by introducing Codex and editing shared CSS, the sister project pages will be updated to support dark-mode as well.
BDD
Feature: Auto dark mode support for Wikimedia portals
Scenario: Apply dark mode based on system preferences
Given a user has their system set to dark mode
When they visit a Wikimedia portal page
Then the page should automatically display in dark mode
Scenario: Default to light mode when system is not in dark mode
Given a user has their system set to light mode
When they visit a Wikimedia portal page
Then the page should automatically display in light modeTest Steps
Test Case 1: Verify dark mode applies automatically based on system settings
- Set your system display preferences to dark mode.
- Visit the following portals:
• https://www.wikimedia.org
• https://www.wikipedia.org
• https://www.wiktionary.org
• https://www.wikinews.org
• https://www.wikiquote.org
• https://www.wikivoyage.org
• https://www.wikiversity.org
• https://www.wikibooks.org
- Confirm that dark mode is automatically applied on all pages.
- AC1: Dark mode is applied based on system settings.
Test Case 2: Verify light mode applies when system is set to light mode
- Change your system display preferences to light mode.
- Visit the same portals listed in Test Case 1.
- Confirm that light mode is automatically applied on all pages.
- AC2: Light mode is applied when the system is set to light mode.
Design
The dark-mode color palette should use Codex design tokens.
Acceptance criteria
- The wikipedia.org page appears in dark-mode when setting your system settings to "dark"
- The remaining sister project sites, such as www.wiktionary.org, also appear in dark-mode.
Communication criteria - does this need an announcement or discussion?
N/A
Rollback plan
- What is the rollback plan in production for this task if something goes wrong?
Revert & deploy the patches in question. Deploys can be done via backport window as this repo doesn't ride the regular deployment train.
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T368221#10542505 |
| 2 | ✅ | T368221#10542505 |
This task was created by Version 1.2.0 of the Web team task template using phabulous
