Page MenuHomePhabricator

Provide a dark skin (CSS)
Open, LowestPublic

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

Details

Reference
bz24070

Event Timeline

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.

lcawte added a subscriber: lcawte.Nov 24 2014, 10:19 AM
Krinkle removed a subscriber: Krinkle.Jul 23 2016, 1:34 AM
Prod added a subscriber: Prod.Oct 27 2019, 6:08 PM

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.

MJL added a subscriber: MJL.Nov 21 2019, 3:02 PM
This comment was removed by Demian.
Demian added a comment.EditedJan 21 2020, 10:06 PM

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.

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.

Demian added a comment.EditedJan 24 2020, 8:16 AM

Merged with above comment.

Demian updated the task description. (Show Details)Jan 24 2020, 9:37 AM

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)

jm3 added a subscriber: jm3.Aug 17 2020, 2:57 AM
alaa added a subscriber: alaa.Aug 21 2020, 2:03 PM