MediaWiki extensions manual
OOjs UI icon advanced.svg
Release status: beta
Implementation User interface
Description Adds a link to toggle dark mode
Author(s) MusikAnimaltalk
Latest version 0.2.0 (2022-07-31)
Compatibility policy Snapshots releases along with MediaWiki. Master is not backward compatible.
MediaWiki 1.38+
Database changes No
License MIT License
Example https://meta.miraheze.org/wiki/Miraheze?usedarkmode=1
  • $wgDarkModeTogglePosition
Quarterly downloads 388 (Ranked 28th)
Public wikis using 167 (Ranked 431st)
Translate the DarkMode extension if it is available at translatewiki.net
Issues Open tasks · Report a bug

The DarkMode extension adds a link to toggle a dark mode theme.


  • Download and place the file(s) in a directory called DarkMode in your extensions/ folder.
  • Add the following code at the bottom of your LocalSettings.php :
    wfLoadExtension( 'DarkMode' );
  • Configure as required.
  •   Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.


The following configuration variables can be set from your LocalSettings.php file:

  • $wgDarkModeTogglePosition - specifies where the dark mode toggle link should be placed. Possible values are:
    • personal (default) – next to the user talk page link in personal URLs.
    • footer – in the footer, usually after the "Disclaimer" link.
    • sidebar – in the sidebar within the navigation portlet.

CSS customizationEdit

Dark Mode works by adding the CSS filter: invert( 1 ) hue-rotate( 180deg ) to the HTML element, and then applies some refinements to MediaWiki UI elements.

Excluding elements from dark modeEdit

On your wiki, you can add the .mw-no-invert CSS class to any element that you don't want inverted. Or you could use the same filter CSS above again, which will invert and rotate the elements back to normal.

Styling elements in dark modeEdit

Dark Mode adds the .client-dark-mode CSS class to the HTML element. If you want to change the way some elements look in dark mode, just prefix the selector with .client-dark-mode.