Extension:DarkMode - MediaWiki
Jump to content
From mediawiki.org
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
Parameters
$wgDarkModeTogglePosition
Hooks used
BeforePageDisplay
GetPreferences
SkinAddFooterLinks
SkinBuildSidebar
SkinTemplateNavigation::Universal
Licence
MIT License
Download extension
Git
Browse repository
GitHub
Gerrit code review
Git commit log
Download source tarball
Example
meta.miraheze.org with
?usedarkmode=1
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
edit
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
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
edit
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
edit
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
edit
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
edit
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
This extension is included in the following wiki farms/hosts and/or packages:
Miraheze
MyWikis
Telepedia
See
Mozilla's documentation on this function
Retrieved from "
Categories
Beta status extensions
User interface extensions
BeforePageDisplay extensions
GetPreferences extensions
SkinAddFooterLinks extensions
SkinBuildSidebar extensions
SkinTemplateNavigation::Universal extensions
MIT licensed extensions
Extensions in Wikimedia version control
All extensions
Extensions included in Miraheze
Extensions included in MyWikis
Extensions included in Telepedia
Skin extensions
Dark mode
Hidden categories:
Extensions without an image
Extensions with release branches compatibility policy
Extensions with manual MediaWiki version
Extension
DarkMode
Add topic