Page MenuHomePhabricator
Create Task
Maniphest T367095

OOUI dark mode bug fixes post-0.50.0 release
Open, HighPublic5 Estimated Story Points
Actions

Description

Background

We've limited impactful changes in OOUI v0.50.0 solely to enabling dark mode. Nonetheless we're assuming to catch a number of dark mode related issues in OOUI interfaces.
This task is a catch-all for issues and fixes for them.

Goal

Ensure that OOUI interfaces are navigable and readable in dark mode

Issues

  1. Special:Preferences OOUI stylesheet uses hard-coded values resulting for example in

image.png (312×2 px, 49 KB)

  1. Special:ApiSandbox

image.png (572×1 px, 153 KB)

  1. Primary destructive buttons use dark color instead of white

image.png (100×238 px, 5 KB)

  1. Radio buttons active state disc is dark instead of white
  2. Focus ring on Radios and focus outline on Checkboxes is dark instead of white

Acceptance criteria

Details

SubjectRepoBranchLines +/-
apisandbox, styles: Apply dark mode enabled color tokensmediawiki/coremaster+3 -3
WikimediaUI theme: Fix primary button color in dark modeoojs/uimaster+8 -8
Preferences: Replace static color values with Codex tokens enabling dark modemediawiki/coremaster+13 -13
Customize query in gerrit

Related Objects
Search...

StatusSubtypeAssignedTask
 OpenJdrewniakT341631 [EPIC] Q1 Main hypothesis: Typographical and palette customizations
 OpenJdrewniakT341632 [EPIC] Palette customizations and dark mode
 OpenovasilevaT354835 [epic] Release night mode as a beta feature on desktop and mobile
 ResolvedJdlrobsonT354836 [goal] Allow desktop and mobile page chrome to appear in night mode ahead of beta release
 OpenovasilevaT354837 [Night mode] Page background appears in night mode on desktop
OpenovasilevaT354838 [Night mode] Page background appears in night mode on mobile
 ResolvedJScherer-WMFT356825 Implement the new night mode color palette in Minerva
 ResolvedovasilevaT357759 Deploy night mode on the minerva skin on test wiki
 ResolvedSpikeSToyofuku-WMFT357077 [Spike] Explore different options for code sharing of page-specific configuration between Minerva and Vector
 OpenovasilevaT354842 [Night mode] All global navigation open by default appear in night mode on desktop
 OpenovasilevaT354843 [Night mode] Make all open-by-default global navigation appear in night mode on mobile
 OpenNoneT356344 [Night mode] Templates can be fixed by editors when necessary for night mode
 OpenBUG REPORTNoneT357575 File pages are not compatible with night mode
 ResolvedovasilevaT357998 Address color contrast issues in .wikitable
 OpenovasilevaT356341 [Night Mode] I want to opt into or out of night mode on mobile
 ResolvedovasilevaT355065 Set up feature flag and menu for night mode on desktop
 ResolvedovasilevaT357707 Re-order Vector preferences - night mode should be above limited width
 ResolvedovasilevaT355118 Set up feature flag for night mode on mobile
 ResolvedovasilevaT355705 Allow pages to not appear in night mode
ResolvedFeatureNoneT328850 Minerva/Vector: Dark mode toggle needs to be tri state
 OpenNoneT362923 Dark mode toggle needs to be tri state in Extension:DarkMode
 ResolvedovasilevaT356653 Show a toast notification on page load for night mode when the setting doesn't take effect in Minerva
 ResolvedovasilevaT358811 Set Minerva default to day mode
 ResolvedovasilevaT361047 Minerva Night Mode launch notifications
 OpenovasilevaT356434 [Night Mode] All pages and overlays that can be accessed within 2 clicks by a logged in user (AMC disabled) appear in night mode on mobile
 ResolvedovasilevaT359152 Deploy initial version of night mode to pilot wikis on the mobile website for testing
 ResolvedovasilevaT359183 Exclude non-functional pages from night mode
 ResolvedBUG REPORTovasilevaT359958 Exclude list is not working for special page names
 ResolvedJdlrobsonT358238 Implement Linting Rule for Template Style Fixes
 ResolvedJdlrobsonT359205 Deployment Ticket - Linting Rule for Template Style Fixes
 ResolvedNoneT358241 Document new night mode linting rules
 ResolvedJdrewniakT358059 Use Codex experimental build in Minerva to allow codex components to appear in night mode
 ResolvedovasilevaT357722 Main pages should work in night mode
 ResolvedBUG REPORTovasilevaT358528 Mobile editor inconsistently renders both night mode and light mode elements
 ResolvedovasilevaT358797 Autocorrect content which uses inline styles using background without color
 ResolvedovasilevaT359571 Add note specifying night mode release is experimental
 ResolvedJdlrobsonT360132 QA: Night mode linting rule
 ResolvedJdlrobsonT359983 Rename the skin night mode classes to something more sensible before they become widely used
 ResolvedovasilevaT363814 Release dark mode as a beta feature on desktop (May 15th)
ResolvedJdrewniakT354889 Vector 2022 should get night theme
 ResolvedJScherer-WMFT354891 [Design] Implement the dark mode color palette and switch LESS variables in Vector to use it
 ResolvedovasilevaT361157 Change "Night" to "Dark" in Appearance settings
 ResolvedovasilevaT362726 [config] Enable night mode styles on Vector 2022 skin
 ResolvedBUG REPORTovasilevaT363779 [Bug] Echo not compatible with desktop night theme
 ResolvedBUG REPORTovasilevaT363861 Visual Editor overlays do not work in night theme
 StalledbwangT363920 Migrate ResourceLoader Icons in Vector to use Codex
 OpenNoneT367150 Deploy dark mode to logged-out users on the Vector2022 skin
 OpenGMikesell-WMFT366738 ULS should have a dark theme
 OpenNoneT365509 [GOAL] Talk page namespaces should not be excluded from night theme
 OpenNoneT366378 [Config change] Enable night theme on preferences pages
 OpenNoneT360656 [GOAL] Interfaces using OOUI should work in night mode
 OpenBUG REPORTNoneT358410 Special:MovePage has color contrast issue in night mode
 OpenNoneT366760 [EPIC] Dark mode for Growth team maintained features
 OpenBUG REPORTNoneT358405 Special:Notifications has color contrast issues in night mode
 In ProgressDTorsani-WMFT355147 [EPIC] Dark Mode
 ResolvedVolker_ET334790 tokens: Implement new static layout background-color tokens
 OpenNoneT366520 [Config] Dark mode is not available on Special:ApiSandbox
 OpenBUG REPORTNoneT366336 Color contrast: Non JavasScript editor should use design tokens to work in dark mode
 OpenNoneT366375 Special:QrCode and Special:UrlShortener has night mode issues
 OpenNoneT364777 [EPIC] Enable dark mode in OOUI
 OpenVolker_ET367095 OOUI dark mode bug fixes post-0.50.0 release
 OpenNoneT367375 Search page doesn't work in dark mode

Event Timeline

AnneT created this task.Mon, Jun 10, 5:20 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMon, Jun 10, 5:20 PM
AnneT triaged this task as High priority.Mon, Jun 10, 5:21 PM
AnneT set the point value for this task to 5.
AnneT added a project: Design-System-Team.
AnneT moved this task from Inbox to DST-Sprint-25 (2024-06-10 to 2024-06-21) on the Design-System-Team board.
AnneT edited projects, added Design-System-Team (DST-Sprint-25 (2024-06-10 to 2024-06-21)); removed Design-System-Team.
Volker_E renamed this task from [PLACEHOLDER] OOUI bug fixes post-0.50.0 release to OOUI dark mode bug fixes post-0.50.0 release.Wed, Jun 12, 11:45 AM
Volker_E updated the task description. (Show Details)
gerritbot added a comment.Wed, Jun 12, 11:50 AM

Change #1042214 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] styles: Replace static color values with Codex tokens enabling dark mode

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

gerritbot added a project: Patch-For-Review.Wed, Jun 12, 11:50 AM
gerritbot added a comment.Wed, Jun 12, 1:36 PM

Change #1042247 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/extensions/AdvancedSearch@master] styles: Enable dark mode

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

thiemowmde added a project: WMDE-TechWish-Sprint-2024-06-12.Wed, Jun 12, 1:37 PM
thiemowmde moved this task from Sprint Backlog to Watching / Epic / Stalled on the WMDE-TechWish-Sprint-2024-06-12 board.
thiemowmde added subscribers: thiemowmde, Lina_Farid_WMDE, WMDE-Fisch.
gerritbot added a comment.Wed, Jun 12, 1:49 PM

Change #1042262 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] apisandbox, styles: Apply dark mode enabled color tokens

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

Jdlrobson subscribed.Wed, Jun 12, 3:26 PM

Hey all, just a note that all these pages are disabled from night mode in production (see https://github.com/wikimedia/operations-mediawiki-config/blob/fb0b98da90919efe92e9026e2b8278cd27f65b19/wmf-config/skin-Minerva.php#L119). For example Preferences and ApiSandbox are not enabled in production yet. This is intentional so we are not overwhelmed chasing bug fixes. Don't feel all these fixes need to go in by Monday, in case that is a worry of yours, but thanks for working on these! If you could also tag the fix with the Phabricator ticket mentioned in wmgMinervaNightModeExcludeTitles that will also make sure we track them correctly.

ovasileva subscribed.Wed, Jun 12, 4:42 PM
gerritbot added a comment.Wed, Jun 12, 9:50 PM

Change #1042214 merged by jenkins-bot:

[mediawiki/core@master] Preferences: Replace static color values with Codex tokens enabling dark mode

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

Jdlrobson added a subtask: T367375: Search page doesn't work in dark mode.Thu, Jun 13, 1:16 AM
Volker_E updated the task description. (Show Details)Thu, Jun 13, 9:22 AM
Volker_E mentioned this in T366520: [Config] Dark mode is not available on Special:ApiSandbox.
Volker_E updated the task description. (Show Details)Thu, Jun 13, 3:26 PM
Volker_E updated the task description. (Show Details)
gerritbot added a comment.Thu, Jun 13, 4:00 PM

Change #1043136 had a related patch set uploaded (by VolkerE; author: VolkerE):

[oojs/ui@master] WikimediaUI theme: Fix primary button color in dark mode

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

Volker_E updated the task description. (Show Details)Thu, Jun 13, 4:01 PM
gerritbot added a comment.Thu, Jun 13, 6:04 PM

Change #1043136 merged by jenkins-bot:

[oojs/ui@master] WikimediaUI theme: Fix primary button color in dark mode

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

gerritbot added a comment.Thu, Jun 13, 6:26 PM

Change #1042262 merged by jenkins-bot:

[mediawiki/core@master] apisandbox, styles: Apply dark mode enabled color tokens

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

egardner moved this task from Committed to In Progress on the Design-System-Team (DST-Sprint-25 (2024-06-10 to 2024-06-21)) board.Thu, Jun 13, 7:41 PM
egardner updated the task description. (Show Details)
Volker_E claimed this task.Fri, Jun 14, 4:58 PM
egardner updated the task description. (Show Details)Mon, Jun 17, 6:05 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL