Wiki:Dark mode compatibility

Dark mode compatibility means the ability of a page content to be displayed in dark mode of the graphical user interface (GUI).

For further reading see Light-on-dark color scheme.

Mode selection

To view the Wiki in dark mode the GUI skin selected must support it, e.g. Vector 2022, MinervaNeue, or Mobile view. The mode is either selected in the skin settings or through the browser preferences.

Appearance

Usually, a dark mode has a dark / black background instead of light / white, and therefore, the standard text colour is inverted to white instead of black.

This can lead to the instance that a text isn't visible or readable in dark mode if the background's colour was changed to white or a light colour.

To avoid this issue, efforts are made to maintain or ensure compatibility of standard styles and content elements with dark mode. See Wiki:Requests for administrator attention/Archive 1#Dark mode GUI compatibility.

Layout options

In order to ensure dark mode compatibility when creating custom page layouts and colours there are several options to use:

• Use available templates that are already compatible.

• Set a dedicated text colour if a custom background colour is used: With CSS use "color:..." to set a text-color (e.g. black if the background is set to white). Often, this is not a preferred way because it suppresses dark mode to switch the colours. Light backgrounds are displayed light in dark mode, too.

• Use MediaWiki class="skin-invert" with <span> or <div> to automatically invert colours (e.g. background colours or images).

• Use a colour variable of MediaWiki, e.g. one of the Codex design system colours, with inline CSS syntax "var(--color-variable-name, fallback color)", e.g. style="background: var(--background-color-notice-subtle, #eaecf0);".

• Define two colours, one for the light and one for the dark mode. This could be done through:
  • Use of special inline CSS syntax "light-dark()", e.g. style="background: light-dark(white,black);" or style="background: light-dark(#fff,#000);" for a white background in light mode and a dark one in dark mode. (Any colour can be specified.)
  • Use of custom CSS style definitions in separate file styles.css, enabled by TemplateStyles extension - mw:Help:TemplateStyles. See e.g. Category:Templates using TemplateStyles.