Wikipedia:Dark mode (gadget)

From Wikipedia, the free encyclopedia
Jump to navigation Jump to search
Dark mode
Dark-mode user script screenshot 2019-09-20 Light-on-dark color scheme - Wikipedia.png
Dark mode enabled in Minerva skin
DescriptionDark mode for Wikimedia wikis
Author(s)CSS: Volker E. (WMF), MusikAnimal, AHollender (WMF)
JS: SD0001, Nardog
StatusStable
UpdatedJuly 26, 2022
    (17 days ago)
Browser supportModern browsers with CSS filter support
Skin supportAll
SourceMediaWiki:Gadget-dark-mode.css
MediaWiki:Gadget-dark-mode-toggle.js

WikimediaUI Dark mode is a gadget for enabling dark mode in modern browsers, based on experimental work of Wikimedia Design team members Volker E. and Alex Hollender in support by volunteer MusikAnimal and others.

Preview dark mode on the Main Page.

To enable, 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 now see a "Dark mode" switch at the top of pages. 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;

Any modern browser works with the only exception being Opera Mini, which lacks filter support.

Setting up the gadget on your wiki[edit]

The CSS was written with Wikipedia sites in mind (see phab:T221425) so experience on other wikis may not be optimal.

To set up the gadget on your wiki, ask an interface-admin to do the following:

  • Create the pages MediaWiki:Gadget-dark-mode.css, MediaWiki:Gadget-dark-mode-toggle-pagestyles.css and MediaWiki:Gadget-dark-mode-toggle.js by copying the English Wikipedia versions. Adjust the localisation strings as appropriate.
    • While the CSS pages need to be copied to avoid FOUCs arising from slow load, for the JS page you may instead dynamically load the enwiki version:
      mw.messages.set( {
          // Set localised messages
      } );
      mw.loader.load( 'https://en.wikipedia.org/w/load.php?modules=ext.gadget.dark-mode-toggle&only=scripts' );
      
  • Add to MediaWiki:Gadgets-definition:
     * dark-mode-toggle [ResourceLoader | targets = desktop, mobile | dependencies = mediawiki.util, mediawiki.api, mediawiki.Uri, mediawiki.storage, es6-polyfills | peers = dark-mode-toggle-pagestyles] | dark-mode-toggle.js
     * dark-mode-toggle-pagestyles [hidden|targets=desktop,mobile | skins=vector,vector-2022,minerva,monobook] | dark-mode-toggle-pagestyles.css
    
  • Add the following to the bottom of MediaWiki:Gadgets-definition. This is an internal gadget which can't be marked as hidden, for technical reasons.
     * dark-mode [ResourceLoader | targets = desktop, mobile] | dark-mode.css
    
  • Create the gadget description pages MediaWiki:Gadget-dark-mode-toggle (the main "dark mode" gadget) and MediaWiki:Gadget-dark-mode (this is the internal gadget – make sure the description is such that users don't enable this one).