Page MenuHomePhabricator

Support for prefers-color-scheme CSS @media feature in default skins
Closed, DuplicatePublic

Description

prefers-color-scheme is a new draft proposal, supported by (at the time of this posting) two browsers. Getting custom skins installed is a hassle, so this really need to go into the most-used default skins.

Note that "dark" doesn't have to be black; page-base, body and other interface elements can be set apart with different shades of dark backgrounds, perhaps in the #222 - #444 range.

So, the game is on: Which skin can provide the most compelling "@media (prefers-color-scheme: dark)" experience?

Event Timeline

prefers-color-scheme is a new draft proposal, supported by (at the time of this posting) two browsers.

Well, actually this should read "prefers-color-scheme is a new draft proposal, supported by (at the time of this posting) two beta versions of browsers, but only if the user uses a supported OS." (Though AFAIK Firefox supports both MacOS and Windows, only Linux is unsupported.)

See also T199634: Allow users to enable a dark mode theme for the vector skin under preferences, combined with this there could be a triple state preference for the mode: light/dark/browser default.

Chromium support is currently in progress. See isse 889087.

To absolutely nobody's surprise, this is now supported by all major browsers. Wikipedia is one of the few major sites left without a dark mode toggle.

There seem to be a few different tasks for this request, but none have any action being taken. This would be a nice feature to have!

Hi and welcome. Please feel free to contribute a patch in Gerrit if you'd like to see progress: https://www.mediawiki.org/wiki/How_to_become_a_MediaWiki_hacker - thanks in advance.

Jdlrobson subscribed.

There seem to be a few different tasks for this request, but none have any action being taken. This would be a nice feature to have!

@Miken32 creating a dark mode is a large maintenance burden, as it essentially means doubling the amount of testing we have to do as well as finding an elegant way to create a simple solution here, which is why no action is probably been taken here yet.

Speaking from experience as a dark skin author, just using @media (prefers-color-scheme: dark) only allow users to manually toggle dark mode though the browser/OS settings. The more useful way is to detect the client's media query flag and adjust the site though JS.

https://web.dev/prefers-color-scheme/

There seem to be a few different tasks for this request, but none have any action being taken. This would be a nice feature to have!

@Miken32 creating a dark mode is a large maintenance burden, as it essentially means doubling the amount of testing we have to do as well as finding an elegant way to create a simple solution here, which is why no action is probably been taken here yet.

As @Jdlrobson mentioned, dark mode requires a lot of effort to do it elegantly. One of the biggest issue with dark mode is the scope. Typically a skin only styles core elements, elements added by templates or extensions should not be styled by the skin because of maintenance overhead and possible complications in the future (like the epic to separate MF and Minerva). So the dark mode styles should be implemented through extensions and templates, and needless to say it is not feasible in short term (especially when the implementation of TemplateStyles is still ongoing). There's always the good old filter: invert(1) hue-rotate(180deg) method but it's quite hacky.

To move the idea forward, the MW ecosystem needs some kind of standardized way to define theme/dark mode at the very least. For example, being able to load different stylesheets based on theme or simply add a class to the html element would be the first step. Then extensions and templates author can specifically define the dark mode styles, and if it isn't defined then fallback to the good old filter: invert(1) hue-rotate(180deg).

Since a lot of parties would be involved in the implementation, it will be time consuming to adopt. May be at the very least having an RfC up for dark mode to explore possible solutions?