Recommendations for night mode compatibility on Wikimedia wikis

Allowing users to switch between light and dark mode is a feature that has gained adoption across a broad range of websites, mobile devices, etc., as a way of giving the user more control to make their reading experience more comfortable.

Across Wikimedia wikis, there are currently efforts underway to introduce dark mode as a first-class option in the user's preferences on the desktop and mobile sites. The Wikipedia apps for iOS and Android have already had options to switch between light/dark mode for some time.

A significant road block to implementing dark mode is the fragmentation of how templates are constructed and styled, as well as the usage of explicit colors, specified as inline CSS styles in certain elements across various articles.

We believe that we can work towards resolving these issues by raising awareness of dark mode among editors of Wikipedia articles, and especially among template editors, since templates can be included in arbitrary numbers of articles, and therefore have an outsized impact for dark mode compatibility.

The following are general recommendations and guidelines for editors to keep in mind when composing articles and templates.

Avoid inline background and text colors
Numerous templates and articles make use of explicit inline colors, when they are not actually necessary. When building new templates, or reviewing existing templates, consider removing inline colors for the background or text. This will allow the current skin to apply its styles to all the elements automatically.

If you are browsing an article in dark mode, and notice an element that seems to be clashing (e.g. a bright white table background), it is very likely due to an inline color specified for that element. Consider reviewing the article or template that is outputting that element, and removing the inline color.

If you believe that a certain element should have a specific color, consider looking for an appropriate CSS class (provided by the skin) that can be applied to the element, which would give it a more distinguishing color. If such a CSS class is not available, consider contacting the skin developers with a request to create a new CSS class.

Where you want to style things, it is recommended you use a stylesheet. See Extension:TemplateStyles for more information.

Bad example

Template:Template Text Good example

Template:Template  Text Template:Template.css .pane { background-color: white; color: black; } @media (prefers-color-scheme: dark) { .pane { background-color: black; color: white; } }

Note: Assume that inline colors will be overridden
In the current implementation of the Page Content Service (the service used by mobile apps to display articles), dark mode works by overriding the colors of most elements with dark styles, using the  CSS property. This is precisely because of the large numbers of templates and elements that specify inline styles.

There are cases when explicit colors are in fact necessary. In such cases, you can include the  class in the element's style, which will prevent its color from being overridden (i.e. themed).

Bad example

In this example the theme will be overriden inside Wikimedia apps. Text Good example

In this example the template has explicitly requested not to be overriden inside Wikimedia apps. Text

Not just dark mode
More generally, we want to encourage editors to think of templates and articles as being agnostic with respect to theming and styles. In addition to dark mode, there can be any number of potential color themes, and indeed the Wikipedia mobile apps (via the Page Content Service) already offer a "sepia" theme, as well as a "black" theme intended for power-saving OLED screens.