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
- For QA engineer to fill out
Test Steps
- For QA engineer to fill out
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.
This task was created by Version 1.2.0 of the Web team task template using phabulous