Feature suggestion: use mw.user.clientPrefs library and consistent classes with evolving skins

[jdlrobson]

The Problem

You don't need to do anything here, but you might benefit from the upstream changes that are occurring!

We've started implementing night mode in Vector 2022 and Minerva and one thing we're trying to do as part of that is standardize classes across skins for how night mode should behave.

You may want to use the same class names on the HTML element and the same API (mw.user.clientPrefs) for managing the mode for anonymous users (it works very similar to your existing window.applyPref)

Let me know if you have any questions or curiosities or lessons learned from implementing night mode in Citizen!

You can check out the following patches to see how night mode is evolving in the Minerva skin:

• Extension:DarkMode: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/DarkMode/+/994817?usp=search
• Skin:MobileFrontend https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/989978
• Skin:Minerva: https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/995114

The Solution

The classes we've landed on are skin-night-mode-clientpref-0 (night mode disabled) = skin-night-mode-clientpref-1 (night mode enabled), skin-night-mode-clientpref-2 (automatic night mode)

The benefit of using this class is that you can make night mode persist for anonymous users.
e.g. calling `mw.user.clientPrefs.set( 'skin-night-mode', '1' ); should enable night mode and persist it for anonymous users.

[alistair3149]

Thank you for the detailed message!
I have been tracking the development of skin architecture and it is awesome to see the progress being made various fronts, especially with dark mode!

As for mw.user.clientPrefs, it is very useful to have an official API for both anon preferences and avoiding FoUC.

Because Citizen has to maintain support for the latest MW LTS (1.39), this will be implemented on the next MW LTS stable release, along with a proper implementation of Codex design tokens. However, I am able to add the night mode classes right away if that is already standardized and ready for adoption.

Let me know if you have any questions or curiosities or lessons learned from implementing night mode in Citizen!

The most important lesson that I learned was that: Because skins can't control most of the UI, skins need provide means to create a cohesive UI.

I'm sure that you realized too because it is a recurring theme on WMF Phabricator for dark mode and DIP. Skins are only responsible for the outer frame of a page.

• Extension and MW core styles: Citizen has specific skinStyles for lots of extensions and MW core RL modules that but it is not sustainable. Thankfully, Codex is here to solve that but it still has a long road ahead, especially for third party extensions.
• Content styles: Citizen uses CSS variables so wikis can utilize those CSS variables in site and template styles, ensuring consistency in their design. I do think that MediaWiki should have a way to expose the final Codex tokens to end users, that will help wikis create a more unified design, while allowing skins to have more control over the general styles of the wiki.

[jdlrobson]

Regarding content styles - yes very similar approach is planned for Wikimedia with the caveat that currently TemplateStyles does not support CSS variables (https://phabricator.wikimedia.org/T320322)

For extensions/MW core styles we plan to make use of Codex design tokens (we are currently exploring making them accessible as CSS variables in https://phabricator.wikimedia.org/T356537)

A sneak peek of our incremental progress can be seen here: https://m.mediawiki.org/?minervanightmode=1

[alistair3149]

Since mw.user.clientPrefs is only available since MW 1.41, we have polyfilled a version that uses localStorage. It should allow for an easy change-over once we are ready to drop MW 1.39 support and move to MW 1.43.

[jdlrobson]

Also heads up after feedback the class has changed to skin-theme-clientpref-night and skin-theme-clientpref-os for night mode in Vector and Minerva. We realized we were making a theming system and were asked to have human readable classes instead of 0,1 and 2.

[alistair3149]

Also heads up after feedback the class has changed to skin-theme-clientpref-night and skin-theme-clientpref-os for night mode in Vector and Minerva. We realized we were making a theming system and were asked to have human readable classes instead of 0,1 and 2.

Thanks for the heads-up! I have read the relevant patches and the new classes are the version that we implemented.

On a side note, would the i18n messages for the theme (skin-theme-) be merged into MW core, given the message key prefix, and are shared across Vector and Minerva? When we implement the same key, it caused an issue with TranslateWiki where they don't allow the same message key across different repos.

[jdlrobson]

Sorry for the delayed reply. There are no plans right now to move these messages to core as they are tied to the Vector and Minerva skins. If there was a way we could abstract things that made sense we could explore that.

Are you planning to load the same controls in Citizen or will you continue to use your own interface? If the latter it is probably best to prefix - i believe translatewiki allows you to sync your messages with another message key.

[alistair3149]

Apologies I have totally missed the reply. I was revising client prefs and found out about this comment.

Are you planning to load the same controls in Citizen or will you continue to use your own interface?

We'll probably use our own interface for now since we are planning to support more themes in the future.

On a side note, is there any plans to integrate client prefs into core in MW 1.43?

[jdlrobson]

On a side note, is there any plans to integrate client prefs into core in MW 1.43?
The API is available in core, but I am not aware of any plans to generalize it - so for now it is just a low level API that skins can use. We've not yet had a use case of adding new preference settings to the user panel.

There is a nice write up about this API from the MediaWiki platform team who maintain it at https://phabricator.wikimedia.org/T345664#9564663. - if you have any feature requests please feel free to request them!

We'll probably use our own interface for now since we are planning to support more themes in the future.

If you want to use them or experiment using them we have an npm library (@wikimedia/mediawiki.skins.clientpreferences) for skins that you can make use of.