Page MenuHomePhabricator

[EPIC] Enable dark mode in OOUI
Open, HighPublic

Description

In order to successfully roll out the new dark mode across the wikis, we need to bring dark mode support to OOUI, which powers many features that are currently in production.

Acceptance Criteria
  • OOUI color variables correctly point to the respective CSS custom properties set by skins, and OOUI styles respect user's color scheme (including client-side switching).
Work Plan

Previously, we had intended to update OOUI so that it could consume Codex design tokens from version 1.5.0 or greater. However, we determined that this approach would force too many other unrelated changes in OOUI that could impact downstream users in unexpected ways (migrating from em to rem units, etc).

Instead, we are taking a minimal approach where we have manually backported the CSS-custom-property-aware color tokens in OOUI but we will not otherwise update or change anything here. This seemed like the lowest-risk way to proceed.

Once code review is complete, we will release a new version of OOUI containing this update and will put it on the beta cluster for testing.

Testing Plan

Previously we were pursuing a more involved approach that would have re-worked a lot of OOUI code to be fully compatible with the latest version of Codex.

We are abandoning this approach, at least for now, in favor of simply backporting the latest version of the Codex color tokens into OOUI. This change will go out as part of OOUI 0.50.0, and will be available on Beta for testing by Wednesday June 12. We expect minimal user-facing changes but we still encourage teams that make use of OOUI to test in their features for any issues; the scope of this change is limited to allowing the LESS color variables to reference CSS custom properties of the same name *if they exist* (a fallback value is still provided as well).

Deadline

Web has targeted June 24 as the date to roll out dark mode to non-logged-in users. Ideally all OOUI testing and fixes for dark mode should be completed by this time. However, this may not be enough time to allow feature maintainers to test their respective projects, so this date may need to be adjusted.

Related Objects

StatusSubtypeAssignedTask
OpenJdrewniak
OpenJdrewniak
Openovasileva
ResolvedJdlrobson
Openovasileva
Openovasileva
ResolvedJScherer-WMF
Resolvedovasileva
ResolvedSpikeSToyofuku-WMF
Openovasileva
Openovasileva
OpenNone
OpenBUG REPORTNone
Resolvedovasileva
Openovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedFeatureNone
OpenNone
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Openovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedBUG REPORTovasileva
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedNone
ResolvedJdrewniak
Resolvedovasileva
ResolvedBUG REPORTovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedJdlrobson
ResolvedJdlrobson
Resolvedovasileva
ResolvedJdrewniak
ResolvedJScherer-WMF
Resolvedovasileva
Resolvedovasileva
ResolvedBUG REPORTovasileva
ResolvedBUG REPORTovasileva
Stalledbwang
OpenNone
OpenGMikesell-WMF
OpenNone
OpenNone
OpenNone
OpenBUG REPORTNone
OpenNone
OpenBUG REPORTNone
In ProgressDTorsani-WMF
ResolvedVolker_E
OpenNone
OpenBUG REPORTNone
OpenNone
OpenNone
DeclinedFeatureegardner
DuplicateNone
OpenEAkinloose
DuplicateBUG REPORTNone
DeclinedFeatureegardner
DuplicateCCiufo-WMF
Openovasileva
ResolvedNBaca-WMF
DeclinedVolker_E
OpenNone
OpenVolker_E
OpenNone

Event Timeline

Volker_E renamed this task from [Epic] Upgrade OOUI to the current version of Codex design tokens to [Epic] Upgrade OOUI's WikimediaUI theme to the current version of Codex design tokens.Tue, May 21, 1:40 AM
egardner renamed this task from [Epic] Upgrade OOUI's WikimediaUI theme to the current version of Codex design tokens to [Epic] Enable dark mode in OOUI.Wed, May 22, 10:07 PM
egardner updated the task description. (Show Details)
CCiufo-WMF renamed this task from [Epic] Enable dark mode in OOUI to [EPIC] Enable dark mode in OOUI.Thu, May 23, 2:25 PM

I assume if I open a new file for the following it will be merged with this so am bringing it here that OOjs dialogs don't support dark mode,

  1. Open https://en.wikipedia.org/w/index.php?title=UEFA_Euro_2024&veaction=edit
  2. Click on Infobox, hit edit

image.png (1×2 px, 279 KB)

Sure the feature still is considered beta and not hitting much of users but an editor has reported it to me.

I assume if I open a new file for the following it will be merged with this so am bringing it here that OOjs dialogs don't support dark mode,

  1. Open https://en.wikipedia.org/w/index.php?title=UEFA_Euro_2024&veaction=edit
  2. Click on Infobox, hit edit

image.png (1×2 px, 279 KB)

Sure the feature still is considered beta and not hitting much of users but an editor has reported it to me.

Hi @Ebrahim, thanks for the report. The work to fix the problem you are seeing is currently underway. Dark mode is definitely still beta, and it will take some time to fix all the various issues across skins, extensions, OOUI, templates, etc. We'll check the template editor dialog as we QA the upcoming fix here.

I've shared this perspective with @ovasileva and @ppelberg but posting here for transparency:

Regarding testing: DST thinks it makes sense to test the rem and dark mode changes in one go. There are two known issues listed in this task already that we plan to fix before the patch demo will be fully ready for testing. DST has no dedicated QTE support so we're going to need to lean on feature teams to actually do the testing and point out any issues.

It would be great if we could resolve the following:

  • What features are the most important to test? We've listed some in the task, but feel free to add more.
  • Some of these features are not owned by Web or Editing and we should think about pulling in other teams to support.
  • We should clean up the Phabricator tasks in light of the testing plan. Right now there are tasks for the Editing team to QA rems, dark mode desktop, and dark mode mobile all independently. @ppelberg will work to consolidate these into one task.

There should be one overall effort to QA dark mode with the OOUI changes, split up by feature or maintaining team. We should make sure all changes are staged on the same patch demo and request teams test their features there. We can then triage the issues needing to be fixed into one of: OOUI (DST, issues posted to this task), skins (Web), or the feature (maintaining team).

cc @Jdlrobson who asked about this in T363857#9847587.

  • We should clean up the Phabricator tasks in light of the testing plan. Right now there are tasks for the Editing team to QA rems, dark mode desktop, and dark mode mobile all independently. @ppelberg will work to consolidate these into one task.

✅ All testing the Editing Team is responsible for will now happen in the recently-renamed and expanded T360691.

@egardner and @CCiufo-WMF, please let me know if anything about the testing plan I've laid out in T360691 brings questions to mind.

In terms of timing, the Editing Team expects to have completed QA by Friday, June 21. I appreciate this falls beyond the June 10 target date named in the task description. If this presents an issue, let's talk!

Oh and thank you Chris for describing the state of things in T364777#9848778 and helping us all to stay in sync.

egardner updated the task description. (Show Details)

Change #1041265 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[oojs/ui@master] WikimediaUI Theme: minimum updates for dark mode compatibility

https://gerrit.wikimedia.org/r/1041265

We are pursuing a scaled-back solution now, and I've updated this task accordingly.

Change #1041265 merged by jenkins-bot:

[oojs/ui@master] WikimediaUI Theme: minimum updates for dark mode compatibility

https://gerrit.wikimedia.org/r/1041265

Change #1041782 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update OOUI to v0.50.0

https://gerrit.wikimedia.org/r/1041782

Change #1041782 merged by jenkins-bot:

[mediawiki/core@master] Update OOUI to v0.50.0

https://gerrit.wikimedia.org/r/1041782