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 Help:TemplateStyles for more information.

Bad example

Template:Example

Good example

Template:Example

Template:Example/styles.css

Overriding dark mode styles
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). In addition, dark mode solutions may use the invert CSS property. You can prevent an element from having colors inverted by adding the  class.

Bad example

In this example the theme will be overriden inside Wikimedia apps, and any colors will be inverted in dark mode on desktop or mobile web:

Good example

In this example the template has explicitly requested not to be overridden inside Wikimedia apps, and the colors won't be inverted elsewhere:

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.