Extension:DarkMode
DarkMode 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 |
Download | |
Example | https://meta.miraheze.org/wiki/Miraheze?usedarkmode=1 |
|
|
Quarterly downloads | 276 (Ranked 16th) |
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]- Download and move the extracted
DarkMode
folder to yourextensions/
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.
- Done â Navigate to Special:Version on your wiki to verify that the extension is successfully installed.
Configuration
[edit]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 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 UI 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.
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: This is not an authoritative list. Some wiki farms/hosts and/or packages may contain this extension even if they are not listed here. Always check with your wiki farms/hosts or bundle to confirm. |
- Beta status extensions
- User interface extensions
- MIT licensed extensions
- Extensions in Wikimedia version control
- BeforePageDisplay extensions
- GetPreferences extensions
- SkinAddFooterLinks extensions
- SkinBuildSidebar extensions
- SkinTemplateNavigation::Universal extensions
- All extensions
- Extensions included in Miraheze
- Extensions included in MyWikis
- Extensions included in WikiForge
- Skin extensions
- Dark mode