Page MenuHomePhabricator

ULS should have a dark theme
Closed, ResolvedPublic2 Estimated Story Points

Description

Background

The ULS switcher is currently forced to always use the light theme. We would ideally like it to use a dark theme. This involves updating various colors to use Codex design tokens

image.png (417×315 px, 16 KB)

User story

As a reader using dark mode I want all user interfaces in dark mode.

Design

  • Add mockups and design requirements

Derived Requirement

Ensure that the Universal Language Selector (ULS) supports a dark theme, updating colors to use Codex design tokens as necessary.

BDD

Feature: Dark Theme for ULS

Scenario: Enable dark theme in ULS

Given the user has enabled dark mode
When the user opens the Universal Language Selector
Then the ULS should display in a dark theme

Test Steps

Test Case 1: Ensure ULS displays in dark theme

Enable dark mode on the device.
Open the Universal Language Selector in the Minerva skin.
AC1: Confirm that the ULS displays in a dark theme.

Acceptance criteria

  • Add acceptance criteria

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

ACStatusDetails
1T366738#9905252

QA Results - PROD

ACStatusDetails
1T366738#9987424

Related Objects

StatusSubtypeAssignedTask
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
OpenBUG REPORTNone
ResolvedJdlrobson
DeclinedFeatureegardner
DuplicateNone
Resolvedovasileva
DuplicateBUG REPORTNone
DeclinedFeatureegardner
DuplicateCCiufo-WMF
Resolvedovasileva
ResolvedNBaca-WMF
DeclinedVolker_E
Resolvedovasileva
ResolvedBUG REPORTovasileva
Resolvedovasileva
DuplicateBUG REPORTNone
ResolvedBUG REPORTovasileva
Resolvedovasileva

Event Timeline

Jdlrobson added subscribers: KSarabia-WMF, NBaca-WMF.

Per @NBaca-WMF suggestion, a quick way to achieve this without resorting to updating design tokens would to be repeat the work @KSarabia-WMF just did in T365990 but to add skin-invert alongside notheme - presumably that would be 1 or 2 points and from what I can see is the path of least resistance to getting a basic dark mode experience that the language team can iterate on later.

Jdlrobson raised the priority of this task from Medium to High.Jun 13 2024, 12:45 AM

Updating priority based on web team internal spreadsheet.

Jdlrobson set the point value for this task to 2.Jun 13 2024, 6:12 PM

Change #1046773 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/extensions/UniversalLanguageSelector@master] Add skin-invert to ULS

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

Change #1046795 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/extensions/ContentTranslation@master] Adds skin-invert class to `.cx-uls-entrypoint__panel-container`

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

Change #1046795 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Adds skin-invert class to `.cx-uls-entrypoint__panel-container`

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

Change #1046773 merged by jenkins-bot:

[mediawiki/extensions/UniversalLanguageSelector@master] Add skin-invert to ULS

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

Test Result - Beta

Status: ✅ PASS
Environment: Beta
OS: macOS Sonoma 14.5
Browser: Chrome 126
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Ensure ULS displays in dark theme

1.Enable dark mode on the device.
2.Open the Universal Language Selector in the Minerva skin.

✅AC1: Confirm that the ULS displays in a dark theme.

2024-06-18_13-44-12.mp4.gif (534×1 px, 1 MB)

ovasileva claimed this task.
ovasileva subscribed.

Looks good, resolving!

Test Result - PROD

Status: ✅ PASS
Environment: PROD
OS: macOS Sonoma 14.5
Browser: Chrome 126
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Ensure ULS displays in dark theme

1.Enable dark mode on the device.
2.Open the Universal Language Selector in the Minerva skin.

✅AC1: Confirm that the ULS displays in a dark theme.

2024-07-16_11-56-58.mp4.gif (670×1 px, 1 MB)