Dark mode is broken in MediaWiki 1.43

Vector 2022 now has its own dark mode called night mode (see e.g. https://wiki.archlinux.org/title/Installation_guide?vectornightmode=1) and our arch_common.less and vector.less need fixing.

Each background, background-color, color, etc. needs to be evaluated and defined properly.

/cc @archlinux/teams/wiki/admins @pierre

added scopebug label

mentioned in merge request infrastructure!933 (merged)

changed the description

added hinthelp-wanted label

changed the description

assigned to @pierre

To properly support dark mode we need to use CSS variables that can be adjusted on the fly instead of static colors. Keeping support for the skins that are not vector-2022 does make this more complex.

My plan so far is:

• Extract all colors as CSS variables
• For Vector 2022 define colors to be used in dark mode

mentioned in commit 1aa04111

mentioned in commit 83ef20ec

@pierre, if it makes it easier, you could split off the vector-2022 style into its own file instead of keeping it together with legacy vector. E.g. with "vector-2022": "skins/vector-2022.less", in extensions/ArchLinux/extension.json.

We'll need to fix the hardcoded colors in https://wiki.archlinux.org/title/MediaWiki:Common.css too.

Same for templates we use that styles with colors. Maybe we need to globally define colors as CSS variables independent from the themes. Then we can use theses colors in Common.css and templates.

mentioned in merge request !90 (merged)

Could we just use the upstream defaults and leave the colors as is? IMO it would be sufficient if the archlinux extension just takes care of putting the bar in place ... Because this kinda was an issue on every release so far

mentioned in commit c0e77829

mentioned in commit 20c9f31f

mentioned in commit ae624738

closed with merge request !90 (merged)

I have merged some updates to our theme into the master. It does work ok with vector-2022 dark mode now.

• It does no longer need the DarkMode extension. We can disable this extension unless it's used for other themes

• To enable auto-dark-mode for even logged out user I had to configure:

  $wgVectorNightMode['logged_out'] = true;
$wgVectorNightMode['logged_in'] = true;
$wgDefaultUserOptions['vector-theme'] = 'os';

• We might need to update templates if they use hard-coded colors. E.g. for archlinux.de I used the new CSS variables and fall back to the previous colors. This way the templates will still work on old themes. See for https://wiki.archlinux.de/index.php?title=Vorlage:Achtung&curid=2156&diff=25242&oldid=14759 an example.

mentioned in issue #79

I started a discussion about template colors in Help talk:Template#Vector 2022 night mode colors.

removed hinthelp-wanted label

mentioned in merge request !93 (merged)

marked this issue as related to #81 (closed)

mentioned in commit nl6720/archwiki@2539e067

mentioned in merge request !94