Page MenuHomePhabricator

Provide a dark / night mode skin or theme
Open, LowestPublicFeature

Description

There have been several instances of feedback asking for a "dark version" (dark background, light text). I don't know if vector tires the eyesight more than monobook or it's simply that they now have a way to ask for it, but the petition was higher than I expected.

Probably more appropiate to provide as an alternate stylesheet than a separate skin, though. I wouldn't be surprised if some wikipedian already designed it.

http://es.wikipedia.org/w/index.php?title=Wikipedia:Comentarios_sobre_experiencia_de_usuario&diff=37939214&oldid=37938825

http://es.wikipedia.org/w/index.php?title=Wikipedia:Comentarios_sobre_experiencia_de_usuario&diff=38075969&oldid=38073560

http://es.wikipedia.org/w/index.php?title=Wikipedia:Comentarios_sobre_experiencia_de_usuario&diff=38246256&oldid=38216451

Related projects

WMF-developed dark-mode userscript usable since October 2019, showing complementer colors with the css rule transform: invert(1)and specific cases fine-tuned for legibility.
Dark-Mode project to implement this in MediaWiki.
T122924: Merge Extension:Theme into core
Skin themes – dark and gray themes for Timeless and Vector skins. Custom color palette, similar to discord's colors. Experimental volunteer project: there is some content that's hard to read with it.

Wishlist Survey: Night mode


Version: 1.21.x
Severity: enhancement

Developer notes

  • To get here we'll likely want to get to a place that skin.variables can be swapped out for a dark equivalent e.g. skin.variables.dark
  • The dark mode would be applied via a prefers-color-scheme CSS @media feature.
  • ResourceLoader would likely need some support to toggle between dark and non-dark mode.

Details

Reference
bz24070

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
bzimport raised the priority of this task from to Lowest.Nov 21 2014, 11:00 PM
bzimport set Reference to bz24070.
bzimport added a subscriber: Unknown Object (MLST).

bugs wrote:

Like this gadget for the "green skin" on enwp (based off something from itwiki)? http://en.wikipedia.org/wiki/MediaWiki:Gadget-Blackskin.css

Did anyone ever do this/has anything like this been done on any of the wikis yet? If not, it looks interesting, I may do it :D

(In reply to comment #2)

Did anyone ever do this/has anything like this been done on any of the wikis
yet? If not, it looks interesting, I may do it :D

I could help a bit if someone is interested in owning this. I was the original/initial author of Vector and know it's working particularly well.

(In reply to comment #3)

(In reply to comment #2)

Did anyone ever do this/has anything like this been done on any of the wikis
yet? If not, it looks interesting, I may do it :D

I could help a bit if someone is interested in owning this. I was the
original/initial author of Vector and know it's working particularly well.

I'm interested.
Hm, Dark Version of Vector would (as stated below) another stylesheet I guess, if it was going to be a team thing, I guess we'd need a repo of some kind.. I don't have SVN commit access yet :( I do however have a SF.net account..

Hi. This feature has been requested several times.

There are many readers and editors who have difficulties to read black text on white background. For some it causes a slight disturbance. Some experience eye strain or headache. Some are unable to read Wikipedia at all.

The proof of the need is that there are several style sheets available in many wikis, as user script or as gadgets. The Firefox add-on "Stylish" has several white on black skins designed for Wikipedia.

The problem with all those home-made style sheets is that they are of poor quality. And they become obsolete quickly, since they are not maintained as Wikipedia evolves.

There is a need for a high quality "light gray text (#BDBDBD) on dark grey background (#2F2F2F)" style sheet, that could be used across all wikis.

Thanks. :-)

(In reply to Rodan BURY from comment #6)

This feature has been requested several times.

Anybody interested is welcome to work on such a skin and nobody will stop you, but it's not a priority for the WMF (if that is the underlying request, not sure).

*If* there are technical blockers that create a problem trying to create such a dark skin (apart from the ones listed already in bug 64731), please file specific bug reports. Thanks.

See T217921 Support for prefers-color-scheme CSS @media feature in default skins. There are several advantages to going this way. Main disadvantage is the Edge still doesn't support it.

There's an experimental dark theme overlay for those interested: https://www.mediawiki.org/wiki/User:Aron_Manning/Skin_themes
Supports Timeless and Vector skins as of January 2020, Minerva and the 2 oldtimers in the future.

MediaWiki dark theme - main-page-2.png (1×1 px, 941 KB)

The purpose of this experiment is to explore the complications of theming (most notably: hardcoded styles in templates and wikitext), find solutions and best practices, such as WikiVersity's Common.css/Colors.css.

To create consistent-looking (professional) dark skin and themes in general, hardcoded inlined styles in wikitext and templates have to be replaced with the use of css classes. Related task: T37704: Drop support in wikitext for inline styles

The colors associated with the classes are then defined in <project namespace>:Common.css/Colors.css or globally if Global templates get implemented.

Eventually, I'd like to come up with recommendations for the current skins and an actual implementation strategy that has no effect on the standard white theme. This can be summarised in one sentence:

  • Adding color: var(--text-shade-X) and similar rules after each color, background, shadow, etc. css rules (fallback is the original rule).

The themes are css files that define between 20-50 colors. The challenge is naming and collecting these variables.

Merged with above comment.

It seems like the custom dark vector css skin I am using now will become unusable in a while due to some breaking changes being made to css properties in mediawiki.
I think it's now a good time to introduce one of those existing skin update it and turn them ibto an official option.
(I am not really sure about why some people are arguing that it's going to be difficult when there are already something like that made by various users floating around for years)

Jdlrobson renamed this task from Provide a dark skin (CSS) to Provide a dark / night mode skin.Jan 13 2021, 11:45 PM
Jdlrobson renamed this task from Provide a dark / night mode skin to Provide a dark / night mode skin or theme.

Note that the same wishlist also have another user requesting a <del>dark</del> yellow mode. (Edit: Typo)

And I personally think a dark background/red content mode would be useful in astronomical observation setting, and also a high contrast mode for people with disability

Should new ticket be opened for each of these proposed skin tones for wikipedia, or could this serve as a general ticket on enabling different skin tones on the same default skin?

\* Note that I think Wikipedia skin should switch to black mode (which may be same as, or different from, a dark mode designed for ease of reading in dark) by default, as with increasing number of devices and monitors shipped across the world being AMOLED, dark background should theoretically help save electricity a bit, which would be minuscule but after considering Wikipedia's large amount of global user and the long total screen time, it might actually have a bit of ecological worth. Having black background can also help users reduce monitor burn ins and reduce the frequency of them needing to replace their monitors or devices, hence helping the environment reducing toxicity due to the raw material extraction caused by new device production or from trash produced by abandonment of old devices.

This ticket is about MediaWiki-extensions-DarkMode. No further ticket is needed.
For the time being, anyone is welcome to set browser.in-content.dark-mode to true in Firefox, or set Settings > Appearance > Theme to Dark in Chromium, if they wanted to reduce electricity, or monitor burn, or such.

Should new ticket be opened for each of these proposed skin tones for wikipedia, or could this serve as a general ticket on enabling different skin tones on the same default skin?

The goal is to have a dark mode that applies to all skins, but there's a lot of work we need to do to prepare for that. Having a dark mode on a per skin basis would be really huge maintenance burden (essentially doubling the number of skins we have to test on).

We're well aware that this is a highly requested feature, and that there are lots of benefits for doing this, and we're working towards making this possible, we just have a long journey ahead of us.

The goal is to have a dark mode that applies to all skins, but there's a lot of work we need to do to prepare for that. Having a dark mode on a per skin basis would be really huge maintenance burden (essentially doubling the number of skins we have to test on).

Sure it would be good if all skins had support for dark mode, but personally I don't really care if they do, to me the most important thing is that the default skin has support for dark mode.

Aklapper changed the subtype of this task from "Task" to "Feature Request".Feb 4 2022, 11:02 AM
Aklapper removed subscribers: aezell, wikibugs-l-list.

This ticket is about MediaWiki-extensions-DarkMode. No further ticket is needed.
For the time being, anyone is welcome to set browser.in-content.dark-mode to true in Firefox, or set Settings > Appearance > Theme to Dark in Chromium, if they wanted to reduce electricity, or monitor burn, or such.

Sorry, I have made a significant typing mistake in my original comment. My comment was meant to say there are also request for yellow mode, and I think a red-on-black mode are also useful for astrological observation purpose, which are both different from just dark mode, and are also why I asked whether a separate ticket should be created for these different color modes.

Separate/different topics should go to separate tickets.

What is the current status on this? Adding official dark mode to Wikipedia is long overdue.

@Mrconter1: Welcome to Phabricator. Please read all of the previous comments first, e.g. T26070#7670546. Thanks.

Hi there! I just joined as I was curious why Wikipedia did not have a Dark Mode.
As far as I can see, this is an installable extension, but not an integrated feature in the site (like a top bar toogle button), is that something you do have on mind to make available in the future?
If so I would lilke to be part of the development of that!

@Migerusantte our main concerns are not with building dark mode, but sustainably maintaining it. Right now there is a lot of technical debt relating to skins we need to take care of before adding dark mode. I think in future the hope is that skins use CSS/LESS variables for their themes and these can easily be tweaked for a dark mode. There are lots of small tasks relating to pushing in that direction that @Volker_E might be able to point to you if you are interested in helping us work towards developing one.

@Migerusantte Hi, myself and a few of my peers (as in Wikimedia Design team members) have come up with an exploration following several design guidelines and agreements in https://en.wikipedia.org/wiki/User:Volker_E._(WMF)/dark-mode – it's available as gadget in your preferences in English Wikipedia.
It would be great if you try it and provide feedback on the corresponding talk page.

Two related issues:

First, I trust any skins will meet colourblindness accessibility guidelines

Second, if one uses software like Redshift on the default skin colours, the blue links eventually become indistinguishable from the black text. It'd be nice if dark modes worked on a monitor set to render redscale. This would also meet the astronomy usecase detailed by @C933103.

These two issues overlap. Making the skin work in redscale would be isomorphic to making it work in greyscale, which makes it accessible to people with all types of colourblindness. No additional maintenance overhead.

I've tested the gadget with Redshift.