84f6ebaf9716ca812ba8e5acc5133f170f332045 was merged with a FIXME comment, so I guess either this task or a follow-up one needs to remain open.

Change #1081438 had a related patch set uploaded (by Tacsipacsi; author: Tacsipacsi):

[mediawiki/extensions/Translate@master] Make the group selector readable in night mode

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

To log an additional problem: the hints that appear on pressing Alt are practically unreadable with the current hack —

The proper night mode support is needed, especially since Translate extension is used not just on translatewiki.net, but in many Wikimedia projects.

https://translatewiki.net/w/i.php?title=Special:LanguageStats&suppresscomplete=1 special page is also blindingly white, which affects every project page. The most colours there use Codex values already, so should be easy to fix.

Change #1082276 had a related patch set uploaded (by Saint Johann; author: Saint Johann):

[mediawiki/extensions/Translate@master] Use Codex variables in stats table component

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

Change #1081438 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Make the group selector readable in night mode

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

Tagging for review.

Change #1082276 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Use Codex variables in stats table component

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

Current status on translatewiki.net:

Issues noticed:

1. ULS is not using dark theme
2. Mode switcher at the bottom is not styled appropriately for the dark theme

We should fix the second item, I think the first one can be handled separately.

Current status would be better looked at by running $( '.skin-invert' ).removeClass( 'skin-invert notheme' ) in console. Special:Translate currently isn’t actually adapted to the night mode, it just uses CSS filters to invert the interface. Which leads to a bunch of issues.

Ideally would be great to have a list of components and checkmarks in the task description. Some are updated already (like statstable) but others are not, especially Special:Translate, which just has a blanket notheme skin-invert applied. The proper fix to this task would be to transition every component to Codex variables kind of like abandoned https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Translate/+/1082216 did.

To me it looks usable. I would just keep the scope of this task at that (fix glaring issues).

We want to reimplement the translation interface using Codex some unknown time in the future. That's a bigger rewrite but will also bring a proper dark mode support.

I already logged one bug with it here:

In T371071#10248401, @stjn wrote:

To log an additional problem: the hints that appear on pressing Alt are practically unreadable with the current hack —

The proper night mode support is needed, especially since Translate extension is used not just on translatewiki.net, but in many Wikimedia projects.

Current night mode support is very insufficient. I don’t think this task should be resolved without fixing it correctly, and not just by the hack that Jdlrobson added.

We can file another bug with the scope of fixing it properly. I want to "capture" the effort that has been put into by closing this task and not leaving it hanging open for years.

As long as night mode support will be actually added so components like those hints can be actually seen (currently I have to guess every time I use it), this task won’t be left hanging open for years. skin-invert solution is a hack, not a fix. Special:Translate wasn’t fixed by it.

Though I guess if ‘ULS support’ in night mode is also just slapping skin-invert notheme at the component and calling it a day (as it seems in Vector-2022), there’s no point to my objections. I’ll just ask that Alt hints also get fixed at least.

Change #1091857 had a related patch set uploaded (by Jon Harald Søby; author: Jon Harald Søby):

[mediawiki/extensions/Translate@master] Use less variables to accomodate dark mode

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

In T371071#10322780, @Nikerabbit wrote:

To me it looks usable. I would just keep the scope of this task at that (fix glaring issues).

“Usable” is not the same as “compatible”. Apart from the completely unreadable Alt texts and the dark-on-light language selector, skin-invert brings in a number of issues because of which I wouldn’t call it compatible: for example, the background color of the message table is weirdly subtly different from the rest of the page (in light mode, both are #fff, but in night mode, the message table is #000 while the rest is #101418), and images in message documentation are inverted (e.g. translate-manage-intro-other or the especially weirdly-looking wikilove-image).

We want to reimplement the translation interface using Codex some unknown time in the future. That's a bigger rewrite but will also bring a proper dark mode support.

This doesn’t mean that there shouldn’t be a short-term solution for the dark mode compatibility. Even if you don’t want to work on it, I think there are enough volunteers (including myself) who are able and willing to fix the dark mode compatibility.

We will review patches to improve dark mode support and I appreciate your efforts. For tracking and reporting purposes, I would appreciate if we can find a way to split the work over multiple smaller tasks under one epic.

Change #1091740 had a related patch set uploaded (by Abijeet Patro; author: Majavah):

[mediawiki/extensions/Translate@master] Fix dark mode border on 'mark this page for translation' bar

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

Change #1091740 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Fix dark mode border on 'mark this page for translation' bar

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

Change #1091857 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Use less variables to accommodate dark mode

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

All the latest changes are deployed on translatewiki.net

Still needs some more work. See task details for more information.

I recommend we create a bigger epic ticket to track work on the entire Translate extension as a whole. I've scoped this to Special:Translate page.

Change #1098872 had a related patch set uploaded (by Jon Harald Søby; author: Jon Harald Søby):

[mediawiki/extensions/Translate@master] Change CSS files into LESS files

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

Change #1098872 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Change CSS files into LESS files

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

Change #1098968 had a related patch set uploaded (by Jon Harald Søby; author: Jon Harald Søby):

[mediawiki/extensions/Translate@master] Lessify LESS files, part 1

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

Change #1099015 had a related patch set uploaded (by Jon Harald Søby; author: Jon Harald Søby):

[mediawiki/extensions/Translate@master] Lessify LESS files, part 2

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

Change #1099018 had a related patch set uploaded (by Jon Harald Søby; author: Jon Harald Søby):

[mediawiki/extensions/Translate@master] Lessify LESS files, part 3

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

Change #1098968 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Lessify LESS files, part 1

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

Change #1099015 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Lessify LESS files, part 2

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

Change #1099018 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Lessify LESS files, part 3

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

Change #1110045 had a related patch set uploaded (by Jon Harald Søby; author: Jon Harald Søby):

[mediawiki/extensions/Translate@master] Special:Translate: Use skin variables for dark mode support

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

Updated	Existing

The white background color was better suited imo.

Which white background colour do you mean in this case? On both screenshots the left panel is white, and the right panel is light grey.

In T371071#10455538, @stjn wrote:

Which white background colour do you mean in this case? On both screenshots the left panel is white, and the right panel is light grey.

The right section on the updated design is a bit more grey compared to the existing design. I think the existing design provides a good contrast between elements.

In T371071#10453878, @abi_ wrote:

Updated	Existing

The white background color was better suited imo.

Yeah, the problem is that the old version uses more shades of gray in the lower #fff/higher #eee range than what is available in Codex. So in this example, the .infobox-column (i.e. right column) used to have the color #fcfcfc, and I picked the closest Codex color available (except white), which was @background-color-neutral-subtle, i.e. #f8f9fa. The suggestion boxes used to have the background #f5f5f5, and for this, the closest available Codex color is also #f8f9fa (this time @background-color-interactive-subtle). I think a good solution there is to use the non-subtle version for the suggestion boxes, which evaluates to #eaecf0; that's a bit darker than they used to be, but it will return the contrast between the background and the boxes.

In T371071#10462137, @jhsoby wrote:

I think a good solution there is to use the non-subtle version for the suggestion boxes, which evaluates to #eaecf0; that's a bit darker than they used to be, but it will return the contrast between the background and the boxes.

Change #1110045 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Special:Translate: Use skin variables for dark mode support

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

Change #1191670 had a related patch set uploaded (by Jon Harald Søby; author: Jon Harald Søby):

[mediawiki/extensions/Translate@master] Use .tux-highlight instead of .highlight

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

Using .tux-highlight results in the following:

Something like @background-color-warning-subtle would be better imo.

Using something like:

background-color: @background-color-warning-subtle;
border: 1px solid @border-color-warning;

Looks better. See:

Agreed! Updated the patch to reflect that.

Thanks for both moving off .highlight and for the color change! I was wondering just today why “Unpublished” is red, even though it’s not an error state that I quickly check a message while translating another one.

Yeah, the red was not ideal. I chose it previously because I thought the warning-subtle background had very low contrast to the background (to the point where I almost didn't notice any difference) in dark mode. But with the border, as suggested by Abijeet, I think it works better.

The .highlight (well, now .tux-highlight) is also used for error messages though, if the save fails for some reason (for me, normally because I lost my wifi connection momentarily). The easiest way to test that is to set up an abuse filter that disallows certain words; I set up one in my local wiki that triggers if you try to save a message containing "ERROR". Those should get a different class with Codex's error tokens, but that's out of scope for this particular task I think.

Change #1191670 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Use .tux-highlight instead of .highlight

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

In T371071#11237026, @jhsoby wrote:

Yeah, the red was not ideal. I chose it previously because I thought the warning-subtle background had very low contrast to the background (to the point where I almost didn't notice any difference) in dark mode. But with the border, as suggested by Abijeet, I think it works better.

I see. Yes, it’s visible now. Although the border does look a bit strange – maybe the whole row (i.e. that.$message.find('.message') instead of that.$message.find('.tux-pagemode-translation'), I guess) should have the background and the border? Or simply spell out what’s happening, just like in list mode, to pass an A-level WCAG 2.2 check (AFAIK we aim to fulfill everything up to AA) and avoid this styling issue at the same time. (Sorry, I haven’t got to test it locally during the week – nor past weekend, which turned out to be a busy one –, so I didn’t realize this issue before the merge.)

The .highlight (well, now .tux-highlight) is also used for error messages though, if the save fails for some reason (for me, normally because I lost my wifi connection momentarily). The easiest way to test that is to set up an abuse filter that disallows certain words; I set up one in my local wiki that triggers if you try to save a message containing "ERROR". Those should get a different class with Codex's error tokens, but that's out of scope for this particular task I think.

I fully agree, both with the need to use different colors, and that it’s out of scope here.