alistair3149
commented
9 months ago 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
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:
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.