Manual: Modo obscur

This page is a translated version of the page Manual:Dark mode and the translation is 9% complete.

Le modo obscur es active quando installationes de MediaWiki usa un schema de colores clar con un fundo obscur.

Isto pote esser implementate con un apparentia, con un extension o con un stilo o gadget del usator.

Developer best practices (2026)

Developers are advised to use:

Codex design tokens instead of custom colors. For extensions that run on Wikimedia production the expectation is that you specifically use the available Codex design tokens. If a Codex design token doesn't exist for your need, it is expected that you should open a new Phabricator ticket detailing the color needed and the reasoning why existing colors do not fit.
mask-image instead of background-image for to make icons dark mode compatible.

The Less mixin darkmode-override() is available to extension developers that can be used as a short term fix while the change is discussed in Codex provided a comment above the mixin points to the open Phabricator ticket. This cannot and shouldn't be on wiki. Please see Recommendations for night mode compatibility on Wikimedia wikis for best practices on wiki page content.

Example short-term usage of the mixin

.mw-rcfilters-ui-changesListWrapperWidget {
    /* @todo: We don't have a standardized text highlight color yet. */
    background: yellow;
    .darkmode-override( {
		background-color: darken( yellow, 70% );
	} );
}

th.headerSort {
	/* @todo: use ResourceLoader image module instead. */
	background-image: url( images/sort_both.svg );
	.darkmode-override( {
		background-image: url( images/sort_both_inverted.svg );
	} );
}

Como activar le modo obscur

Solutiones recommendate

In 2024, le maniera recommendate de usar le modo obscur in le apparentias (skins) de MediaWiki es de usar proprietates personalisate de CSS e definir un paletta pro le modo obscur que se applica in le casos ubi le usator ha exprimite un preferentia pro le modo obscur al nivello del systema de operation (usante prefers-color-scheme) o ha optate pro le modo obscur per medio del interfacie de usator.

Le projectos de Wikimedia supporta iste solution in le application de Wikipedia e in le apparentias Vector 2022 e Minerva. The Wikipedia apps also support their own dark themes, although via a separate implementation.

Un del implicationes de isto es que le redactores de patronos debe adaptar lor contento pro functionar in modo obscur.

Therefore, template authors should be familiar with Recommendations for night 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 categorised; see the complete list in: Category:Skins with dark mode ^ia.

Website

On Wikimedia sites using the default Vector 2022 (desktop) and Minerva (mobile) skins, dark mode is available to both logged-in and logged-out readers as part of the Reading/Web/Accessibility_for_reading project.

On desktop (Vector 2022), readers can change the appearance from the controls in the top-right of the page:

Open the appearance menu (for example via the spectacles icon in the personal tools area) and choose Light, Dark or Automatic.

On mobile (Minerva), readers can:

Open the main menu (the "hamburger" icon), tap Settings, then in the Color section choose Light, Dark or Automatic.

In both cases, the Automatic option follows the operating system preference, if the browser supports cssom-view’s prefers-color-scheme.

Desktop dark mode setting
Desktop dark mode setting (on smaller screens, or when menu has been hidden)
Finding mobile dark mode setting (1)
Finding mobile dark mode setting (2)
Finding mobile dark mode setting (3)

Mobile Apps

The official mobile Wikimedia Apps for Android and iOS have multiple themes available, including light-on-dark.

Wikipedia Android app white theme
Wikipedia Android app sepia theme
Wikipedia Android app dark theme
Wikipedia Android app black theme

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, but 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 such as 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 . For anonymous users, various browser extensions exist. Wikipedia:Dark mode lists 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 categorised (see complete list in: Category:User scripts for enabling dark mode ^ia) and may be packaged as user CSS or gadgets .

Forcing dark mode temporarily

You can temporarily force MediaWiki's dark mode for testing purposes by adding a URL parameter to the page. These parameters are primarily intended for debugging and may change or be removed in the future:

?vectornightmode=1 – forces dark mode in the Vector 2022 desktop skin
?minervanightmode=1 – forces dark mode in the Minerva mobile skin

These parameters override the user’s system preference and the skin’s default behavior. They are not intended as long-term or user-facing configuration options.

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 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 yourself 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 responsible template, you can click edit using VisualEditor and hover over the element. 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 Extension:Echo notification dialog, file a ticket against the Echo extension and tag #dark-mode. The generic catch-all tag may be used when you cannot identify the cause.

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.

februario 2019 – Dark mode is the 2nd wish in the community wishlist survey. It was planned under the desktop improvements project.

maio 2019 – The desktop improvements project begins, kicking off work on Codex and design tokens that would later enable dark mode.

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

septembre 2019 – Volker E. releases the first dark mode gadget.

decembre 2021 – English Wikipedia adds a dark mode gadget.

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

februario 2023 – Dark mode again tops the 2023 wishlist.

junio 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.

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

novembre 2023 – Dark mode is announced on the Wikimedia blog.

januario 2024 – Development on dark mode begins.

martio 2024 – Support for CSS variables is added in Codex .

junio 2024 – Support for CSS variables is added in OOUI .