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

Assigned To

Authored By

	Jdlrobson
	Jun 5 2024, 6:29 PM

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

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

AC	Status	Details
1	✅	T366738#9905252

QA Results - PROD

AC	Status	Details
1	✅	T366738#9987424

Details

	Subject	Repo	Branch	Lines +/-
	Add skin-invert to ULS	mediawiki/extensions/UniversalLanguageSelector	master	+3 -3
	Adds skin-invert class to `.cx-uls-entrypoint__panel-container`	mediawiki/extensions/ContentTranslation	master	+1 -1

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved		ovasileva	T341631 [EPIC] Q1 Main hypothesis: Typographical and palette customizations
Resolved		ovasileva	T341632 [EPIC] Palette customizations and dark mode
Resolved		ovasileva	T367150 Deploy dark mode to logged-out users in tier 1 and 2 wikis on the Vector2022 and Minerva skin
Resolved		ovasileva	T366738 ULS should have a dark theme
Resolved		ovasileva	T365509 Enable night mode on talk page namespaces
Open	BUG REPORT	None	T357600 Flow doesn't work in night mode
Resolved		Jdlrobson	T364777 [EPIC] Enable dark mode in OOUI
Declined	Feature	egardner	T363849 [OOUI] Make WikimediaUI theme compatible with CSS custom properties and future versions Codex Design Tokens
Duplicate		None	T364420 QA Editing-related night mode changes (desktop)
Resolved		ovasileva	T360691 QA Editing-related OOUI updates (mobile + desktop)
Duplicate	BUG REPORT	None	T365517 PopupWidget notification for hidden sidebars has white background
Declined	Feature	egardner	T363857 [OOUI] Make WikimediaUI theme compatible with 'rem' units and future versions Codex Design Tokens
Duplicate		CCiufo-WMF	T365521 QA Editing-related REM changes
Resolved		ovasileva	T365764 [OOUI] Icons: Add support for use in dark mode
Resolved		NBaca-WMF	T366709 [Spike] Make a decision on what needs to happen for icons before the new OOUI release
Declined		Volker_E	T366101 [OOUI] Fix font size inconsistencies across skins with `rem` based sizing
Resolved		ovasileva	T366197 VisualEditor should use Codex design tokens for custom colors
Resolved	BUG REPORT	ovasileva	T367432 DiscussionTools source mode preview is not night mode friendly
Resolved		ovasileva	T366737 Vector 2022: VisualEditor toolbar and overlays should appear in night theme
Duplicate	BUG REPORT	None	T367371 VisualEditor when using CodeMirror syntax highlighting is unreadable in dark mode
Resolved	BUG REPORT	ovasileva	T367823 Many user talk page signatures are not compatible with dark mode
Resolved		ovasileva	T368086 Talk highlight doesn't work in dark mode

Event Timeline

Jdlrobson created this task.Jun 5 2024, 6:29 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 5 2024, 6:29 PM

Jdlrobson triaged this task as Medium priority.Jun 5 2024, 6:29 PM

Jdlrobson moved this task from Backlog to Excluded experiences on the FY2023-24-WE 2.1 Typography and palette customizations board.

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.