Page MenuHomePhabricator

Allow users to enable a dark mode theme for the vector skin under preferences
Open, Needs TriagePublic

Description

The problem
A white background can cause eye strain when viewed for long periods of time. Wikipedia readers can use their browser's reading mode to see white text on a black background; however, editors cannot use browser features like this.

Proposed solution
Similar to on the Wikipedia mobile app, allow users to enable a dark mode.

Event Timeline

Daylen created this task.Jul 14 2018, 10:43 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 14 2018, 10:43 PM
Paladox added a subscriber: Paladox.
ashley added a subscriber: ashley.Jul 14 2018, 11:04 PM

This is already doable via the Theme extension, which is installed on ShoutWiki sites as well as various other wikis. By default the Theme extension provides 2 Vector themes and 3 MonoBook themes (see https://www.mediawiki.org/wiki/Extension:Theme#Available_themes). Custom skins (like Bouquet or Gamepress) can register their own themes in the skin's setup file.

There is T122924 about getting the theme feature finally merged into MediaWiki core, but alas, sadly no-one is actively working on it right now.

https://www.mediawiki.org/wiki/Skin:DarkVector and T122924 already exist hence I don't see a need to edit the Vector codebase. Removing project tag.
This seems to be a request to deploy that skin on Wikimedia sites so this falls under Wikimedia-Extension-setup.

CC Paladox

https://www.mediawiki.org/wiki/Skin:DarkVector and T122924 already exist hence I don't see a need to edit the Vector codebase. Removing project tag.
This seems to be a request to deploy that skin on Wikimedia sites so this falls under Wikimedia-Extension-setup.

Please let's not. Adding a new skin which is essentially a fork of Vector with merely a different color scheme would be an unnecessary maintenance burden on pretty much everyone involved. A far more superior and maintainable approach would be the Theme extension I mentioned, once the extension would be reviewed by the security team as well as otherwise scrutinized to be suitable for WMF deployment. That extension provides the capability to rather easily "extend" skins with alternate color schemes, and it goes without saying that reviewing ~200 lines of CSS(/LESS) is a lot easier than 1k+ lines of PHP, CSS/LESS and JS.

@ashley: Thanks for the comment and for explaining. Very good points that I was not aware of.

Restricted Application added a project: Community-Tech. · View Herald TranscriptApr 24 2019, 10:20 PM

No, let's merge the dark theme directly into the standard Vector. That way, users benefit without having to annoy site owners.
The correct way to do this, though, is not through a preference option, but through the prefers-color-scheme @media feature (see T217921). Edge is the only major browser that still lacks support, but it will get that, when they switch to the Chrom(e/ium) rendering engine.

This has the additional benefit that the design follows the account preference, but the dark/light pref follows the device. It will even work on wikis you don't have an account on (as long as the default skin is Vector).

Masumrezarock100 added a subscriber: Masumrezarock100.

No, let's merge the dark theme directly into the standard Vector. That way, users benefit without having to annoy site owners.
The correct way to do this, though, is not through a preference option, but through the prefers-color-scheme @media feature (see T217921). Edge is the only major browser that still lacks support, but it will get that, when they switch to the Chrom(e/ium) rendering engine.
This has the additional benefit that the design follows the account preference, but the dark/light pref follows the device. It will even work on wikis you don't have an account on (as long as the default skin is Vector).

This could be in scope of the Desktop Improvements project.