User:Volker E. (WMF)/dark-mode
| dark-mode.js | |
|---|---|
| Description | Dark mode for Wikimedia wikis |
| Author(s) | Volker E. (WMF) and MusikAnimal with some CSS from AHollender (WMF) |
| Status | Stable |
| Updated | April 25, 2020 (4 years ago) |
| Browsers | Modern browsers with CSS filter support |
| Skins | All except Timeless (Timeless support coming soon) |
| Source | User:Volker E. (WMF)/dark-mode.js MediaWiki:Gadget-dark-mode.css |
WikimediaUI Dark mode is a user script for enabling dark-mode in modern browsers.
It is also available as a gadget on English Wikipedia. Note that this is an experiment based on the work of Wikimedia Design team members Volker E. and Alex Hollender in support by volunteer MusikAnimal and others.
It's now among the top 5 most-used custom enabled gadgets on enwiki, without any advertisment. Thanks to all users!
Any modern browser works with the only exception being Opera Mini, which lacks filter support.
Read more about the reasons for light-on-dark color scheme aka dark mode like reduced eye strain or energy savings specifically on OLED displays.
Installation
[edit]Some of the installation options enable usage on en-wikipedia. However, note that the CSS was written with Wikipedia in mind (see phab:T221425) so experience on other wikis may not be very optimal.
English Wikipedia
[edit]Go to your gadget preferences, and enable the gadget "Dark mode toggle: Enable a toggle for using a light text on dark background color scheme".
You should see a "Dark mode" switch after clicking on the profile icon at the top right corner of your screen. If you wish to enable/disable dark mode automatically based on your system colour scheme, add the following to your common.js page:
window.wpDarkModeAutoToggle = true;
Other wikis
[edit]If the gadget is not installed, you could try one of the below options:
Option 1: Permanently enable dark mode (no toggling)
[edit]Add the following line to the top of your Special:MyPage/common.css page on that wiki:
@import "https://en.wikipedia.org/enwiki/w/index.php?title=MediaWiki:Gadget-dark-mode.css&action=raw&ctype=text/css";
Option 2: Enable dark mode automatically based on the system theme
[edit]Add the following line to the top of your Special:MyPage/common.css:
@import "https://en.wikipedia.org/enwiki/w/index.php?title=MediaWiki:Gadget-dark-mode.css&action=raw&ctype=text/css" screen and (prefers-color-scheme: dark);
Option 3: Enable dark mode with a toggle (causes flickers)
[edit]It adds an item to your personal menu labelled “Dark mode” (Vector) which turns it on and off. This option causes a flicker to happen on page loads. This should work on any wiki. Additionally it uses the Operating System user preference for light or dark color scheme by default.
Enable the user script User:Volker_E._(WMF)/dark-mode.js by adding the following line to your common JavaScript:
mw.loader.load( 'https://en.wikipedia.org/enwiki/w/index.php?title=User:Volker_E._(WMF)/dark-mode.js&action=raw&ctype=text/javascript' ); // [[User:Volker_E._(WMF)/dark-mode.js]]
Known issues
[edit]In the Firefox browser with monobook skin, MediaViewer is busted (no longer shows image previews).Now Fixed —TheDJ (talk • contribs) 23:13, 4 December 2021 (UTC)- In the Firefox browser, a white bar can appear in the middle of the current page. Turning off the script / css seems to fix this.
- ...
×