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) |
Browser support | Modern browsers with CSS filter support |
Skin support | 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.
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.
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;
If the gadget is not installed, you could try one of the below options:
Add the following line to the top of your Special:MyPage/common.css page on that wiki:
@import "https://en.wikipedia.org/?title=MediaWiki:Gadget-dark-mode.css&action=raw&ctype=text/css";
Add the following line to the top of your Special:MyPage/common.css:
@import "https://en.wikipedia.org/?title=MediaWiki:Gadget-dark-mode.css&action=raw&ctype=text/css" screen and (prefers-color-scheme: dark);
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/?title=User:Volker_E._(WMF)/dark-mode.js&action=raw&ctype=text/javascript' ); // [[User:Volker_E._(WMF)/dark-mode.js]]
×
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) |
Browser support | Modern browsers with CSS filter support |
Skin support | 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.
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.
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;
If the gadget is not installed, you could try one of the below options:
Add the following line to the top of your Special:MyPage/common.css page on that wiki:
@import "https://en.wikipedia.org/?title=MediaWiki:Gadget-dark-mode.css&action=raw&ctype=text/css";
Add the following line to the top of your Special:MyPage/common.css:
@import "https://en.wikipedia.org/?title=MediaWiki:Gadget-dark-mode.css&action=raw&ctype=text/css" screen and (prefers-color-scheme: dark);
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/?title=User:Volker_E._(WMF)/dark-mode.js&action=raw&ctype=text/javascript' ); // [[User:Volker_E._(WMF)/dark-mode.js]]
×