In T368086#9912353, @Jdlrobson wrote:

@JScherer-WMF this one would benefit from some design input. Could you reach out to the editing team's designer?

One short term fix we could make here is:

• Disable the .ext-discussiontools-init-highlight-fadein rule.
• Ship some other custom color in dark mode e.g. (.skin-theme-clientpref-night .ext-discussiontools-init-targetcomment { background: #3c3a3a; }

Thanks for this, Jon.

Could we use the background-color-progressive-subtle token for these?

Light mode background would be #EAF3FF
Dark mode background would be #1C2940

And color-base text should always pass contrast on those.

As a short term fix, I think disabling the fade-in rule would be fine.

If that works, please go ahead and move this to ready for estimation.

@nayoub does this approach sound alright to you?

Thanks for the ping, @JScherer-WMF.
Your approach sounds good to me.

Mm.. it looks like the highlight is actually a foreground with opacity 1 rather than a background which makes this much trickier than switching out a color variable. @Esanders do you have any background and any recommendations with how we would proceed with this? We're aiming to ship dark mode to desktop (T367150) on 16th July which means we need a fix in place for this by the 9th.

While reviewing this I also noticed, there is a similar highlight for recently published contents (#ffe29) @JScherer-WMF @nayoub what would you recommend there?

We use mix-blend-mode: darken so the text stays black under the highlight. There isn't a blend mode that works well in dark and light mode, so you'll need to use lighten in dark mode. mix-blend-mode is used in a few place so perhaps you will want to make this a re-usable token.

https://codesearch.wmcloud.org/search/?q=mix-blend-mode%3A&files=&excludeFiles=svg&repos=#Extension:VisualEditor

Some places use multiply which has similar effect to darken in a light mode, so they can probably be switched to the token too.

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

[mediawiki/extensions/DiscussionTools@master] Fixes background of talk page highlights in dark mode

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

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

[mediawiki/extensions/DiscussionTools@master] Use green rather than yellow for newly posted messages

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

For newly posted messages we currently use a yellow background.

Design tokens wise it would make more sense to use @background-color-success-subtle

@nayoub @Esanders @JScherer-WMF what do you think?

I've limited the token to dark mode for now in the first patch, but added a[[ https://gerrit.wikimedia.org/r/1050478 | follow up ]] in which we can also change the color in light mode, if it makes sense.

that makes sense @Jdlrobson, @background-color-success-subtle seems better than yellow for sure – we could even consider @background-color-progressive-subtle if we could consider the success feedback to be too prominent.
(cc @bmartinezcalvo @DTorsani-WMF)

If it is already yellow, we could also use @background-color-warning-subtle. One thing to consider with using yellow or blue as a sort of highlight, is that currently we use these types of colors for diff backgrounds, so it could resemble that. That being said this is a different page entirely so that might not matter.

In T368086#9925675, @Esanders wrote:

Some places use multiply which has similar effect to darken in a light mode, so they can probably be switched to the token too.

The dark-mode equivalent of multiply is screen. Where multiply combines colors so that the result is at least as dark as the inputs, screen combines them so that the result is at least as light as the inputs. https://drafts.fxtf.org/compositing/#blendingmultiply https://drafts.fxtf.org/compositing/#blendingscreen

In T368086#9933345, @nayoub wrote:

that makes sense @Jdlrobson, @background-color-success-subtle seems better than yellow for sure – we could even consider @background-color-progressive-subtle if we could consider the success feedback to be too prominent.
(cc @bmartinezcalvo @DTorsani-WMF)

I agree with Nico here, green is a more semantically correct background colour for these. It is system feedback to communicate the success of a user action, not a warning about a potential action. So let's use @background-color-success-subtle which will work in dark mode and eventually in light mode or other modes, and we don't need to worry about the CSS filters when/if base colours change in the future.

Change #1050477 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Fixes background of talk page highlights in dark mode

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

Change #1050478 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Use green rather than yellow for newly posted messages

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

@Jdlrobson Please review the issue below when you have a free moment, thanks!

Test Result - Test.wiki

Status: ❌ FAIL
Environment: Test.wiki
OS: macOS Sonoma 14.5
Browser: Chrome 126
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Visit https://test.wikipedia.org/wiki/MediaWiki_talk:Vector-2022.css#c-Jonesey95-20240618190400-Links_inside_tables in dark mode
The highlighted text is not readable.

@GMikesell-WMF this is not in production yet. Please test in beta cluster. We test production usually as part of the Verification task.

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

Visit https://en.wikipedia.beta.wmflabs.org/wiki/MediaWiki_talk:Vector-2022.css#c-Jonesey95-20240618190400-Links_inside_tables in dark mode

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

Visit https://en.wikipedia.org/wiki/MediaWiki_talk:Vector-2022.css#c-Jonesey95-20240618190400-Links_inside_tables in dark mode

Just showing that Beta got updated compared to last week screenshot

PROD	Beta