Change #1081913 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Update Wikibase CSS to LESS to support theme variables

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

Some screenshots of the UI for the current patch:

As you can see, absent the missing colour values, some UI elements are basically unreadable.

I commented on Gerrit: the second screenshot is pretty easy to fix; the third one with the termbox isn’t easy to completely fix, but making it readable (returning to the current status quo of dark text on light background) isn’t difficult.

In T369385#10258169, @ArthurTaylor wrote:

Some screenshots of the UI for the current patch:

This one looks ok to me, is there an element that I am missing

For this one we can use the colours for the datatype section from here:

Box: #27292D
Text: #EAECF0

The termbox here can use the same colours from here:

Box: #27292D
Text: #EAECF0

And the datatype from here:

Box: #27292D
Text: #EAECF0

We may need to leave the popover warning as is for now

Hi @Arian_Bozorg ,

Thanks for the suggestions here. Per https://www.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis#Avoid_static_values_for_inline_background_and_text_colors , what we don't want to do is use static colour values. Where there are matching codex design tokens, we can use those.

For example, for emphasized black text in light mode we have @color-emphasized. If we use this token, it would be inverted in dark mode on my wiki to #f8f9fa. But @Lucas_Werkmeister_WMDE already rejected this approach in the code review, because it changes the light mode colour from #000000 to something lighter (#101418).

So I need you to choose between three different options here:

1. Introduce new CSS variables for the light and dark mode colours - you would need to specify what the foreground and background colours should be in both light and dark mode, and this would great a longer-term maintenance burden for us since we're not aligning with Codex
2. Pick and use similar / appropriate Codex Design tokens - this is ideal from a maintenance point of view, but it might / will cause people to see slightly different colours in light mode than they are used to.
3. Leave the UI / UX broken in places where we don't have a Codex Design token that matches the current light mode experience.

I don't see a real problem with the first option. If Codex doesn't have a design token for what you need then you create your own variable or you suggest the addition of new design tokens in Codex for your needs. Codex is supposed to be more generic, so it's normal that it doesn't cover all and every use case of every extension there is.

I think it would be worse using Codex design tokens for something different than what the variable name says just because they have the same color you need (like taking one random with a name like @color-dialog-shadow that has #000 because you need the color for the text)

I'm not sure I can really describe distinguishing between #000000 and #101418 as a use-case. The use case in both cases seems to be "dark text on a light background", and it's not clear to me that introducing a new variable makes for an improvement in the user experience that is worth the additional maintenance. When we introduce custom colours, they are colours which will not be updated as the look-and-feel of mediawiki is updated, and colours that will not be included in skins.

Here are the two colours side-by-side:

I think, although a little lighter the colour provides enough contrast and aligns with codex components. But if this is something that will make things not meet legibility contrast standards then we may have to go with option 1.

@Arian_Bozorg Are you saying that we should conditionally go with option 1 (with a condition that I am unable to evaluate)? Or is that a decision for option 1?

In T369385#10272283, @ArthurTaylor wrote:

For example, for emphasized black text in light mode we have @color-emphasized. If we use this token, it would be inverted in dark mode on my wiki to #f8f9fa. But @Lucas_Werkmeister_WMDE already rejected this approach in the code review, because it changes the light mode colour from #000000 to something lighter (#101418).

I don’t interpret that comment as a rejection, but merely as a question. Actually, Lucas hasn’t even commented on @color-emphasized, only on @color-base. And while it’s okay not to change that color in the first iteration, I think we should switch from color: #000 to either color: @color-emphasized or color: @color-base in the long term. (Although that particular piece of code is used by a tab bar, for which the (very) long-term solution should be migrating from jQuery tabs to <cdx-tabs>.)

So I need you to choose between three different options here:

1. Introduce new CSS variables for the light and dark mode colours - you would need to specify what the foreground and background colours should be in both light and dark mode, and this would great a longer-term maintenance burden for us since we're not aligning with Codex

I wouldn’t necessarily use CSS variables for these colors. As long as there are different light and dark versions, CSS variables don’t bring much value. (CSS variables are useful because they can be used by TemplateStyles, gadgets etc., but I don’t think Wikibase should introduce a stable interface in this regard.) Just use Less variables that expand directly to CSS color values.

I’d also note that while it indeed has a long-term maintenance burden, because of which it shouldn’t be used if other alternatives are viable, it doesn’t increase the long-term maintenance burden: static colors, which are used today, have the same maintenance burden.

On the other hand, it’s not only maintenance burden that custom colors increase, but also inconsistency (which, again, isn’t new): the exact colors of Codex design tokens not only depend on the light/dark mode of Vector 2022, but also on the skin (for example, @color-base is #202122 on Vector 2010 and 2022, but #222 on Timeless). If we introduce our own colors, Timeless won’t be able to override it (technically Vector is the one that overrides, but since we all develop on Vector 2010/2022, that’s the effective baseline).

For anyone who wants to see how entity pages currently look like on Wikidata, you can either go to https://test.wikidata.org/ (where night mode is not disabled on entity pages), or use the bookmarklet javascript:void(document.documentElement.classList.toggle('skin-theme-clientpref-night')) to toggle night mode – the latter works on https://www.wikidata.org/ as well, regardless of the general disablement of night mode on entity pages.

moved back to task breakdown as current status of the ticket/ acceptance criteria is unclear

I think the acceptance criterion for the task should be that all parts of entity pages (minus gadget/site style-defined things, of course) appear light-on-dark when in night mode.

An intermediate acceptance criterion for the open Gerrit changes can be that all parts of entity pages are readable, i.e. either light-on-dark or dark-on-light, and never light-on-light, when in night mode.

Could we finally get the existing patches merged? The perfect has been the enemy of good for way too long here, defining various sets of acceptance criteria instead of just accepting the patches. I was very into the dark mode, but I’ve given up on it (temporarily) because the constant switching between light mode (Wikidata entity pages) and dark mode (everything else) is even worse in a dark environment than the consistent light mode.

What is the status of this task? Vector 2022 will be the default skin from next week.

In T369385#10625519, @Sjoerddebruin wrote:

What is the status of this task?

We’ve had some discussions with Design and now I believe we’re planning to resume development work on it soon.

Vector 2022 will be the default skin from next week.

Yes, but dark mode will be enabled separately later, see T366607#10580783.

I've tidied up the patch that we had almost ready to go about [... checks watch ...] 5 months ago, and have added some clarification questions to the figma for @LarissaHonsek .

Test wiki created on Patch demo by Arthur Taylor (WMDE) using patch(es) linked to this task:
http://patchdemo.wmcloud.org/wikis/1d198eb560/w/

Link to preview the darkmode UI on patchdemo: https://patchdemo.wmcloud.org/wikis/1d198eb560/wiki/Item:Q1?vectornightmode=1&useskin=vector-2022

Thanks for creating the patch demo! I’ve played with it a bit.

• Adding statements, qualifiers and references doesn’t work at all, it constantly says I’ve got logged out. This is almost certainly doesn’t have anything with your patch, it just makes testing a lot more difficult. (My guess is that Wikibase tries to use unencrypted HTTP when making requests, and while my Firefox is configured to automatically upgrade requests to HTTPS, it loses the session cookie in the meantime.)
• When adding/editing a statement/qualifier/reference or alias (but not label or description), the input field has a bright background color and a bright text color, making it unreadable.
  
  

Change #1079986 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Use Codex design tokens in wikibase UI to support darkmode

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

Hm, I thought the HTTPS issue was supposed to be fixed according to T372960#10500036. Maybe it was only fixed in the new Catalyst backend?

Yeah, a Catalyst wiki seems to work better: https://7b09a73eb8.catalyst.wmcloud.org/wiki/Item:Q1 (not sure why the bot didn’t announce it here)

Alternatively, this should be testable on Beta in a few minutes.

Test wiki on Patch demo by Arthur Taylor (WMDE) using patch(es) linked to this task was deleted:

http://patchdemo.wmcloud.org/wikis/1d198eb560/w/

Deleted patchdemo 1d198eb650 since the changes so far should be live for review on Beta.

We have made substantial changes with the patches attached to this ticket, which can now be reviewed on beta. For the remaining issues in the Property/Item UI, we will file subtasks of this ticket to address outstanding elements. If you find an issue in the dark-mode UI on beta that is not addressed in one of the subtasks, please feel free to create the subtask

In T369385#10646417, @Tacsipacsi wrote:

Thanks for creating the patch demo! I’ve played with it a bit.

• Adding statements, qualifiers and references doesn’t work at all, it constantly says I’ve got logged out. This is almost certainly doesn’t have anything with your patch, it just makes testing a lot more difficult. (My guess is that Wikibase tries to use unencrypted HTTP when making requests, and while my Firefox is configured to automatically upgrade requests to HTTPS, it loses the session cookie in the meantime.)
• When adding/editing a statement/qualifier/reference or alias (but not label or description), the input field has a bright background color and a bright text color, making it unreadable.
  
  

Filed these issues as T389351 and T389349 - thanks for the report! We'll keep filing tickets for the individual issues and try and get enough of them resolved that we feel good about enabling Dark Mode for Wikibase for all users.

I think in order to get resolved https://gerrit.wikimedia.org/r/c/operations/mediawiki-config/+/1081067 should be merged? See also https://github.com/wikimedia/operations-mediawiki-config/blob/master/wmf-config/skin-Minerva.php#L52