Thank you @Etonkovidova ❤️

Change #1031495 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[operations/mediawiki-config@master] Enable night mode on Vector on testwiki, disable on Special:Homepage

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

Change #1031495 merged by jenkins-bot:

[operations/mediawiki-config@master] Enable night mode on Vector on testwiki, disable on Special:Homepage

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

Mentioned in SAL (#wikimedia-operations) [2024-05-14T20:05:54Z] <cjming@deploy1002> Started scap: Backport for [[gerrit:1031495|Enable night mode on Vector on testwiki, disable on Special:Homepage (T357699 T363814)]]

Mentioned in SAL (#wikimedia-operations) [2024-05-14T20:08:34Z] <cjming@deploy1002> jdlrobson and cjming: Backport for [[gerrit:1031495|Enable night mode on Vector on testwiki, disable on Special:Homepage (T357699 T363814)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-05-14T20:24:34Z] <cjming@deploy1002> Finished scap: Backport for [[gerrit:1031495|Enable night mode on Vector on testwiki, disable on Special:Homepage (T357699 T363814)]] (duration: 18m 40s)

I see two options here:

Option 1: Inverting content area with accessibility issues introduced

Adding skin-invert notheme to div.growthexperiments-homepage-container` and overlay growthexperiments-homepage-container.homepage-module-overlay makes the page look like it has a dark theme. We would need to uninvert any images that appear in that interface.

However... there is a big downside - it introduces accessibility issues into the desktop version of the page, that don't exist in light theme.

We could potentially fix this with additional CSS rules, which would be difficult given they would need to define new colors that can be inverted safely, but this would create technical debt for the Growth team.

Option 2: Using tokens

To get the page working without any accessibility issues, we are looking at a lot more work involving updating the tokens, however the end result would be accessible code. Most of these colors look like they would map to the existing color palette in Codex.

I think we can proceed with Option 1 and create a separate follow-up ticket for option 2 that we can loop the Growth team onto.

Change #1047177 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/GrowthExperiments@master] Enable dark mode via skin invert for Special:Homepage

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

In T357699#9902802, @ovasileva wrote:

I think we can proceed with Option 1 and create a separate follow-up ticket for option 2 that we can loop the Growth team onto.

Filed as T367986.

Change #1047177 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Enable dark mode via skin invert for Special:Homepage

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

Change #1048061 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/GrowthExperiments@master] Improve dark mode on Growth homepage

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

I keep finding contrast issues and issues in general in GrowthExperiments interfaces, an example of that is the "help panel" and the "onboarding dialogs". At this point I don't know how many notheme skin-invert more we would need to introduce to fix all growth features. Since the task is just in the scope of the homepage, my proposal would be that we fix the rest of Growth features with Option 2 (when possible) instead of Option 1? I'm adding known issues (as issues that exist without the skin-invert applied) in T367986, given the spread of background-colors around the extension modules, maybe it's easier to handle this by use case? cc @Jdlrobson @ovasileva @Etonkovidova

Change #1048061 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Improve dark mode on Growth homepage

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

Change #1048549 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/GrowthExperiments@master] Rotate hue of images

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

Change #1048549 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Rotate hue of images

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

Change #1049975 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[operations/mediawiki-config@master] Enable special pages in dark mode (1.43.0-wmf.12)

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

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:Display Special Correctly in Night Mode

✅ AC1: Confirm that all UI elements are displayed correctly with appropriate dark-themed styling.

✅ AC2: click "see all suggestions", the overlay has no color contrast issues, and images look identical to day theme

✅ AC3: visit https://en.m.wikipedia.org/wiki/Special:Homepage#/homepage/suggested-edits and click "Easy" an OOUI dialog pops up. Should also have no accessibility issues.

In T357699#9913747, @Sgs wrote:

I keep finding contrast issues and issues in general in GrowthExperiments interfaces, an example of that is the "help panel" and the "onboarding dialogs". At this point I don't know how many notheme skin-invert more we would need to introduce to fix all growth features. Since the task is just in the scope of the homepage, my proposal would be that we fix the rest of Growth features with Option 2 (when possible) instead of Option 1? I'm adding known issues (as issues that exist without the skin-invert applied) in T367986, given the spread of background-colors around the extension modules, maybe it's easier to handle this by use case? cc @Jdlrobson @ovasileva @Etonkovidova

Ran a quick check (and keeping the scope of the task only to Special:Homepage) - all look good; adding only one small issue to this task :

<div class="suggested-edits-difficulty-indicator suggested-edits-difficulty-indicator-easy">Easy</div>

Change #1049975 abandoned by Jdlrobson:

[operations/mediawiki-config@master] Enable action edit/submit and remaining special pages in dark mode (1.43.0-wmf.12)

Reason:

Moved into https://gerrit.wikimedia.org/r/c/operations/mediawiki-config/+/1050671?usp=search

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

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Sonoma 14.5
Browser: Chrome 126
Device: MBS
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1:Display Special Correctly in Night Mode

✅ AC1: Confirm that all UI elements are displayed correctly with appropriate dark-themed styling.

✅ AC2: click "see all suggestions", the overlay has no color contrast issues, and images look identical to day theme

✅ AC3: visit https://en.m.wikipedia.org/wiki/Special:Homepage#/homepage/suggested-edits and click "Easy" an OOUI dialog pops up. Should also have no accessibility issues.

@Edtadros would you mind sharing the tool you use for contrast checking? I used FF accessibility tool in the past for non dark-mode related issues but it seems it does not work for our case since it does not pick up the font color has been inverted (that's my hypothesis).

In T357699#10267641, @Sgs wrote:

@Edtadros would you mind sharing the tool you use for contrast checking? I used FF accessibility tool in the past for non dark-mode related issues but it seems it does not work for our case since it does not pick up the font color has been inverted (that's my hypothesis).

It's WCAG Color contrast checker. I found it's useful, especially when you need to see the list of elements with contrast ratio.
Re the issue you see with the tool not indicating the inverted font color - I re-checked, there is an indication of the low contrast, although not as extreme as FF Accessibility reports.

I re-ran some checks for Sepcial:Homepage in dark mode with different tools, i.e.

• Chrome devtools Lighthouse
• Chrome axe DevTools
• Chrome CSS overview - reports 17 contrast issues

• Chrome extension WCAG Color contrast checker
• FF Accessibility

Although those different checks do not contradict each other, they report the contrast issues in different format and measure the color contrast somewhat differently. The question is - which tool is the most useful to supply unambiguous information to devs?

FF accessibility seems not an option at this point, using WCAG Color contrast checker is good enough for now. We're thinking of using something like cypress-axe to get some accessibility checks in CI.