Manual:Dark mode

Dark mode is when MediaWiki's uses a light-on-dark color scheme. This can be implemented with a skin, an extension or user style/gadget.

How to enable dark mode

Recommended solutions

In 2024, the recommend way for MediaWiki skins to use dark mode is to make use of CSS custom properties and define a dark mode palette that applies in the scenarios where the user has expressed a preference for dark mode at the operating system level (using prefers-color-scheme) or opted into dark mode via the UI.

This solution is supported on Wikimedia projects in the Wikipedia App, the Vector 2022 and Minerva skins. One of the implications of this is that template editors must adapt their content to work in dark mode.

Therefore, template authors should be familiar with Recommendations for dark mode compatibility on Wikimedia wikis for understanding how to make templates that are compatible with MediaWiki's dark mode implementations.

Skins that support dark mode are collected under Category:Skins with dark mode.

Generic solutions

A typical generic solution to dark mode is to apply a CSS filter across the entire page, to make the page darker. This approach can be applied generally to all skins that do not support dark mode, however has several limitations including

• performance problems on large pages and older devices
• can lead to misinformation - where colors correspond with information, and are incorrectly darkened for example articles about colors e.g. International Orange

For third parties, that understand the downsides of this approach, the Extension:DarkMode can be installed or a MediaWiki gadget / site-wide user script can be applied. For logged in users, the gadget can be modified as a user script and for anonymous users, various browser extensions exist.Wikipedia:Dark_mode lists various options for registered and unregistered users.

User stylesheets

An alternative approach for adding dark mode is to define a user stylesheet that overrides existing rules provided by the skins. The problem with this is that it must be updated every time the skin changes.

Such user styles are collected in Category:User scripts for enabling dark mode and may be packaged as user CSS or gadgets.

Forcing dark mode temporarily

You can also force the dark mode feature on a page. Add ?vectornightmode=1 (for Vector 2022, the desktop skin) or ?minervanightmode=1 (for Minerva, the mobile skin) to the URL.

How to report issues with dark mode

Issues with third-party gadgets

Please report issues with gadgets or user scripts directly to the associated gadget or user script talk page. Please do not use Phabricator to report issues with gadgets as they will not reach the right person.

Issues with content in Wikimedia sites

For issues relating to the content itself - for example infoboxes or boxes that appear on the side of the article, it is best to directly report them to editors via the talk page or attempt to fix them using Recommendations for night mode compatibility on Wikimedia wikis as a guide.

In some cases, you may be able to fix issues yourselves by clicking edit and updating inline styles. In other cases, fixes may require edits to commonly transcluded templates, that you do not have permission to edit. If you need to identify the template responsible, you can click edit using VisualEditor and hover over the element to identify the associated template. Use the talk page to communicate the issue.

Issues with user interface in Wikimedia software

For issues in dark mode, please file bugs against the associated extension. For example if you notice an issue inside the Echo notification dialog, please file a ticket against the Echo extension and tag #dark-mode. Note: The generic catch all hash tag #dark-mode is provided for when you are unable to identify the reason for the bug. This is loosely monitored and will eventually be redirected to the correct maintainer.

Note for issues specifically on non-Wikimedia sites, with Extension:DarkMode please use the dedicated phabricator tag. This extension is not used on Wikimedia sites.

History

Timeline may be out of date and some dates prior to 2019 may be inaccurate - please update if you have the knowledge!

2010: A light-on-dark color scheme (dark mode, night mode) has been suggested as an option/enhancement to Wikipedia numerous times since 2010, including on Phabricator.

February 2019 Dark mode is the 2nd wish of the large ideas on the community wishlist survey. It is planned under the scope of the desktop improvements project so declined from the wishlist.

May 2019 The desktop improvements project begins. This kick starts work on the design system Codex, design tokens and architectural rewrites that may eventually facilitate the creation of a dark mode experience.

May 2019 The Community Tech team discuss applying a generic dark mode solution that uses an invert, as part of the Wishlist survey.

September 2019 Volker releases the first dark mode gadget.

December 2021 English Wikipedia adds a dark mode gadget

February 2022 Dark mode is the top wish of the large ideas on the community wishlist survey.

February 2023 Dark mode tops the community wishlist 2023

June 2023 The desktop improvements project concludes, adding support for preferences for logged out users. We are able to consider a native dark mode experience for anonymous users for the first time.

July 2023 The accessibility for reading project begins with scope of supporting adding controls for changing text size and color scheme.

November 2023 Dark mode is announced on the Wikimedia blog

January 2024 Development on dark mode begins.

March 2024 Support was added for CSS variables in Codex.

June 2024 Support was added for CSS variables in OOUI.

See also

• Wikipedia:Dark_mode
• dark color scheme