Extension:DarkMode

This extension is not used on Wikimedia sites and this page should not be used for flagging issues with dark mode on Wikimedia sites. Please see Manual:Dark mode for understanding different options for dark mode support with MediaWiki.

MediaWiki extensions manual

DarkMode Release status: beta
Implementation	User interface
Description	Adds a link to toggle dark mode
Author(s)	MusikAnimal, Radman Siddiki
Latest version	0.2.1 (2025-08-29)
Compatibility policy	Snapshots releases along with MediaWiki. Master is not backward compatible.
MediaWiki	1.40+
Database changes	No
License	MIT License
Download	Download extension Git [?]: Browse repository (Phabricator · GitHub) Gerrit code review Git commit log Download source tarball
Example	meta.miraheze.org with ?usedarkmode=1
Parameters $wgDarkModeTogglePosition
Hooks used BeforePageDisplay GetPreferences SkinAddFooterLinks SkinBuildSidebar SkinTemplateNavigation::Universal
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.

Installation

• Download and move the extracted DarkMode folder to your extensions/ directory.
  Developers and code contributors should install the extension from Git instead, using:

  cd extensions/
  git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/DarkMode
  

• Add the following code at the bottom of your LocalSettings.php file:

  wfLoadExtension( 'DarkMode' );
  

• Configure as required.
• Customize as required.
• Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

Configuration

The following configuration parameter 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 customization

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

Excluding elements from dark mode

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. Note that since hue-rotate does not preserve brightness, the original color may not be preserved.

You can also use .mw-invert to force invert (git master, since October 2023 / commit 2859e16). This is intended to help with the readability of maps and math.

Styling elements in dark mode

Dark Mode adds the .client-darkmode 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-darkmode.