Recommendations for night mode compatibility on Wikimedia wikis - MediaWiki (2024)

Languages:

  • Deutsch
  • English
  • Hausa
  • español
  • français
  • polski
  • العربية
  • 中文
  • 日本語
Recommendations for night mode compatibility on Wikimedia wikis - MediaWiki (1)Recommendations were made and are maintained by the Web team. They are based on data, technology trends, and our capabilities. As such, they evolve and may change.

See also: Recommendations for mobile friendly articles on Wikimedia wikis

Allowing users to switch between standard and night mode is a feature adopted across many websites, mobile devices, etc. It gives the user more control to make reading more comfortable.It is being added to our software as part of the Reading/Web/Accessibility for reading project.

Across Wikimedia wikis, there are efforts underway to introduce night mode in the user's preferences on the desktop and mobile sites.The Wikipedia apps for iOS and Android have already had these options for some time.

A significant road block to implementing night mode is how templates are constructed and styled. Another challenge is the usage of explicit colors, specified as inline CSS styles across various articles.

We can resolve these issues by raising awareness of night mode among editors, especially template editors. This is because templates can be included in many articles, and thus have a great impact for night mode compatibility.

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

[edit]

For now, you can append ?minervanightmode=1 to the end of any URL to see how the content currently behaves in the night theme.You can also use https://test.m.wikipedia.org/wiki/Special:MobileOptions to enable night mode on our test wiki.We will update this instruction as the feature develops.

Recommendations

[edit]

Use recommended HTML markup to describe your templates

[edit]

Night mode will ship with styles that automatically fix known-universal problems with templates.This is important for projects with fewer technical editors.It will be possible to opt out of these styles by adding the notheme class to respective element or globally (phab:T358071).Projects that do not make use of these classes will likely get the feature later than others.

More information: Use standardized class names in HTML markup for components in templates across projects

Use accessible colors which pass WCAG AA checks

[edit]

Many of the colors used in day mode have historically been inaccessible.When selecting colors for night mode, please be sure to check existing colors with the WebAIM contrast checker.Please consider modifying luminance to make the colors pass.Consider installing a browser extension such as the WCAG Color Contrast tool (Chrome, or Firefox) to get more awareness around the color contrasting issues on your wiki.

Bad example

@media screen { html.skin-theme-clientpref-night .element { background-color: #666666; color: #ace; }}

Good example

@media screen { html.skin-theme-clientpref-night .element { background-color: #383838; color: #ace; }}

Target night mode using standard media query as well as HTML classes

[edit]

A standard readable skin-theme-clientpref-night class will be applied to the HTML element when dark mode has been enabled. However, styles that target night mode should also target prefers-color-scheme as certain users may have opted in via their operating system and subscribed to those styles via skin-theme-clientpref-os.Targeting prefers-color-scheme will style content appropriately for both sets of users.

Bad example

Template:Example/styles.css

html.skin-theme-clientpref-night .pane {background-color: white;color: black;}

Good example

Template:Example/styles.css

/* forced night mode *//* Note: If using a CSS variable, there is no need to make use of `@media screen` */@media screen { html.skin-theme-clientpref-night .pane { background-color: black; color: white; }}@media screen and (prefers-color-scheme: dark) {/* automatic mode */html.skin-theme-clientpref-os .pane {background-color: black;color: white;}}

Avoid static values for inline background and text colors

[edit]

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 night 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) or a CSS variable.

Bad example

Template:Example

<div class="pane" style="background-color: white; color: black;">Text</div>

Good example

Template:Example

<templatestyles src="Template:Example/styles.css" /><div class="pane">Text</div>

Template:Example/styles.css

@media screen { html.skin-theme-clientpref-night .pane { background-color: white; color: black; }}@media screen and (prefers-color-scheme: dark) {html.skin-theme-clientpref-os .pane { background-color: black; color: white; }}

Always define color when defining background

[edit]

When defining a background color, it may be tempting not to define the color if it is the same as the article text color.However, when different themes e.g. night mode are applied, this could have unintended consequences (e.g. white text on a yellow background).It is thus recommended that you always define the two together.A lint rule is provided to support editors to identify pages and templates with this issue.

Even if using CSS variables, it is important to explicitly define the color alongside the background to avoid assumptions about the context in which it is being used.For example, a template may be embedded inside another template / table that defines its own backgrounds or colors or there may be global styles applying to the page that may inadvertently impact your own content.

Bad example

Template:Example

<div style="background-color: yellow; padding: 16px;">Text</div>

Good example

Template:Example

<div style="background-color: yellow; color: #333; padding: 16px;">Text</div>

Use CSS variables or CSS design tokens with fallback for background and text where possible

[edit]

Recommendation is currently restricted to use inside TemplateStyles (phab:T360562, phab:T361934).

CSS variables can only be defined inside gadgets and site CSS e.g. MediaWiki:Common.css.

When using design tokens you must note that stability is currently not guaranteed and may require later changes based on phab:T340477.

When using inline styles to modify text or background, let's use a CSS design token that is supported by the skin.A list of design tokens can be found in the Codex documentation.When using the CSS variables for Codex design tokens, always provide a fallback value for skins where CSS variables are not supported.

You can also define your own CSS variables inside a gadget (for example, the default hidden night mode gadget on English Wikivoyage).

Bad example

<span style="font-size:0.95em; font-size:95%; color: #54595d;">A subscription is required to read this URL.</div>

Good example

In this example, the color-subtle design token is used, with #54595d only used as a fallback when CSS variables are not available in the skin.This gives skins with night mode the information needed to adjust the content to a suitable color.

<!-- Always define a CSS fallback value for skins which do not support Codex e.g. Monobook. --><span style="font-size:95%; color:var(--color-subtle, #54595d);">A subscription is required to read this URL.</div>

Overriding night mode styles / disabling the night mode theme

[edit]

In the current implementation of the Page Content Service (the service used by mobile apps to display articles), night mode works by overriding the colors of most elements with night styles, using the !important CSS property.This is precisely because of the large numbers of templates and elements that specify inline styles.In the web version, this also happens to a lesser extent (primarily on elements relating to infoboxes, navboxes and other common templates).

There may be cases where the color removal is unwarranted or where editors may disagree with the choice made.In such cases, you can include the notheme class in the element's style, which will prevent its color from being overridden (i.e. themed).This will result in the content being styled across themes (e.g. night/light/sepia) in exactly the same way.

Bad example

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

<div class="pane">Text</div>

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:

<div class="pane notheme mw-no-invert">Text</div>

Apply filters to dark images with transparent background

[edit]

Certain images (for example, signatures in infoboxes) tend to be black content with transparent backgrounds.In night mode, this results in unreadable SVGs because the black content will be on a dark background.To fix this, you can use a CSS invert filter (using the skin-invert or skin-invert-image class).When the thumbnail is accompanied by a caption you should use the skin-invert-image class to avoid inverting the caption as well.To invert all images in a gallery you can add the skin-invert class to the ‎<gallery> tag.

Bad example

In this example this can result in a black inked signature on a black background

[[File:Tupac Shakur's signature.svg|thumb]][[File:Gas flare fr.svg|thumb|left|Éléments d'une torchère.|alt=Schéma. Le gaz est séparé du pétrole, déshumidifié, et envoyé vers la cheminée, il y a un allumeur au sommet.]]

Good example

Here the colors are inverted so the signature becomes white.

[[File:Tupac Shakur's signature.svg|thumb|class=skin-invert]][[File:Gas flare fr.svg|thumb|left|class=skin-invert-image|Éléments d'une torchère.|alt=Schéma. Le gaz est séparé du pétrole, déshumidifié, et envoyé vers la cheminée, il y a un allumeur au sommet.]]

For templates with no option to specify the class, you can use a <div> tag to wrap around the template and apply the class there. For example:

<div class="skin-invert-image"> {{multiple image|align=center|total_width=540 |image1=... }}</div>

When skin-invert does not work

[edit]

Certain images will not be easily invertible in night mode without losing important information (for instance, images with a dark base accompanied by bright colors).In these cases, the best option to preserve the image's original colors is probably to provide a light-colored background rather than invert the image, so that it can be seen in both day and night modes.

Avoid using background: none or background: transparent

[edit]

Most of the time these are unnecessary, and worse still these will interfere with automatic fixes in place for night mode for your project.These should be removed or moved to TemplateStyles if absolutely necessary to avoid color contrasting issues in the night theme.

Bad example

<div style="background: transparent;">Text with transparent background</div>

Good example

The background rule is unnecessary.

<div>Text with transparent background</div>

Acceptable example

If the background is necessary, define color: inherit as well.

<div style="background: transparent; color: inherit;">Text with transparent background</div>

Advice for editors building alternative themes

[edit]

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

To invert or not to invert?

[edit]

An invert using CSS filters provides a quick way to convert content designed in a light theme into a darker theme.While we cannot recommend this approach for all content, it is still a useful tool that can often be utilized safely and cheaply.The Wikipedia night mode gadget uses the invert CSS filter property to style content.You can prevent an element from having colors inverted by adding the mw-no-invert class.You can also use the skin-invert class to request that the content is inverted by the software when available.

Consider patterns rather than background colors

[edit]

Colorblind readers can have difficulties telling apart and recognizing small colored items.In articles, consider using patterns rather than, or in addition to, color where appropriate.Ideally, where the pattern is separate from the text.Consider using monochrome CSS Background Patterns and reading about how Trello introduced a colorblind friendly mode.

Bad example

Template:Example/styles.css

html.skin-theme-clientpref-night .ib-youtube-above {background-color: #B60000;color: white;}

Good example

Template:Example/styles.css

@media screen { html.skin-theme-clientpref-night .ib-youtube-above { background-image: linear-gradient(135deg, #ff1c00 25%, transparent 25%), linear-gradient(225deg, #ff1c00 25%, transparent 25%), linear-gradient(45deg, #ff1c00 25%, transparent 25%), linear-gradient(315deg, #ff1c00 25%, var(--background-color-base) 25%); background-position: 8px 0, 8px 0, 0 0, 0 0; background-size: 8px 8px; background-repeat: repeat-x; }}

Consider globally setting link color inside tables with background

[edit]

It is quite common for editors to create tables with background colors defined on rows or columns.If the table contains links this can be problematic, as often the color choices will be tailored towards accessibility in the standard theme, or will not consider accessibility at all.

For example the links in this table are accessible in light theme but not the dark theme:

Phab ticketDescription
T360844Links in elements with background color should become black with an underline so they are accessible
https://phabricator.wikimedia.org/T357575File pages are not compatible with night mode

Instead of blue links inside these tables, it might be better to create black links with underlines (to distinguish them from other text).

More information in https://phabricator.wikimedia.org/T360844

/* Last updated 30th July 2024 */@media screen { /* [[phab:T360844]] */ html.skin-theme-clientpref-night table:not(.infobox) [bgcolor] a, html.skin-theme-clientpref-night table:not(.infobox) th[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a, html.skin-theme-clientpref-night table:not(.infobox) td[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a, /* should not apply to th elements which have their own background. */ html.skin-theme-clientpref-night table:not(.infobox) tr[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) td a { color: var( --color-base-fixed, #202122 ); text-decoration: underline; } html.skin-theme-clientpref-night .infobox a { color: var( --color-progressive ) !important; } html.skin-theme-clientpref-night .infobox a.new { color: var( --color-destructive ) !important; }}@media screen and (prefers-color-scheme: dark) { html.skin-theme-clientpref-os table:not(.infobox) [bgcolor] a, html.skin-theme-clientpref-os table:not(.infobox) th[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a, html.skin-theme-clientpref-os table:not(.infobox) td[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a, html.skin-theme-clientpref-os table:not(.infobox) tr[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) td a { color: var( --color-base-fixed, #202122 ); text-decoration: underline; } html.skin-theme-clientpref-os .infobox a { color: var( --color-progressive ) !important; } html.skin-theme-clientpref-os .infobox a.new { color: var( --color-destructive ) !important; }}

Disabled text does not necessarily need to meet color contrast guidelines

[edit]

From https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements.An inactive user interface component is visible but not currently operable.An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.

The page looks fine to me, despite not following these rules, why?

[edit]

To reduce the amount of initial work that is required for wikis to adopt night mode, various generalized solutions may have been applied for the time being to pages to help them comply with night mode.These styles will eventually be removed, when wikis have adapted to the new theme.

These are listed here:

  • WikimediaMessages SiteAdminHelper - the site admin helper ships various styles that improve night mode support - this includes disabling/updating backgrounds and borders in elements with the class .navbox, .infobox, .quotebox, .side-box, .metadata, .navigation-box, and all elements on the main page. It also enforces black text color on any element which defines an inline style with a background rule. Note, while this fixes the large majority of issues, this also causes breakage to some elements, in particular any style attribute that sets background: inherit and background: transparent.
  • MediaWiki:Vector-2022.css / MediaWiki:Minerva.css rules - some wikis may have adopted generalized rules that change links to black underlined text to any table element that have inline styles that apply backgrounds. For example English Wikipedia.
  • A local solution may have already been applied to the template you are looking at. Be sure to inspect the element and look at any associated styles provided by template styles that may be applying specific rules when the night theme classes are detected on the HTML element.

Examples

[edit]

The following tickets explain fixes for various namespaces/templates and types of pages that were applied to a single project. They may be useful to other projects with similar templates or outdated copies of those templates.

Please be sure to read the associated discussion – and ask questions if you have any so other projects can benefit from sharing expertise.

General issues

[edit]

  • Links inside table rows with background colors: phab:T360844
  • Tables with alternating row colors T358003

Portals

[edit]

Templates / modules

[edit]

Messages

[edit]

Please review the following messages on your wiki:

Recommendations for night mode compatibility on Wikimedia wikis - MediaWiki (2024)

FAQs

Recommendations for night mode compatibility on Wikimedia wikis - MediaWiki? ›

To turn dark mode on and off for the Wikipedia website, just click on the extension icon when you're on the Wikipedia website. You can toggle the dark mode/night mode for Wikipedia to be on and off.

How to view wiki in dark mode? ›

To turn dark mode on and off for the Wikipedia website, just click on the extension icon when you're on the Wikipedia website. You can toggle the dark mode/night mode for Wikipedia to be on and off.

Does Wikipedia have a dark mode safari? ›

Wikipedia Dark Mode for iOS

In the top left corner of the app there is a small gearwheel - click it. Find Reading preferences. Choose Sepia, Dark or Black.

How do I turn on dark mode in Mediawiki? ›

Installation
  1. Add the following code at the bottom of your LocalSettings. php file: wfLoadExtension( 'DarkMode' );
  2. Configure as required.
  3. Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.
Aug 21, 2024

How do I view everything in dark mode? ›

At the bottom right of a New Tab page, select Customize Chrome . Under “Appearance,” select either: Light : Chrome will be in a light theme. Dark : Chrome will be in a dark theme.

Why does Wikipedia still not have a dark mode? ›

Unlike the apps, the Wikipedia website doesn't offer a native dark mode. Instead, you'll need to use an extension or add-on. Our favorite dark mode extension is Night Eye. This add-on is available for all major desktop web browsers, and gives thousands of websites a custom dark theme.

How do I force dark mode for web contents? ›

How to enable Dark Mode in Google Chrome?
  1. Launch Google Chrome.
  2. Search for "dark mode" in the search box at the top of the Experiments page.
  3. Click the box to the right of "Auto Dark Mode for Web Contents" and select "Enabled" as the default setting.
Feb 26, 2023

Is dark mode better for your eyes? ›

Dark mode should make it easier for your eyes to adjust from your dimly lit surroundings to your phone screen, reducing screen glare. This may reduce eye strain and minimize eye fatigue. This is why car navigation systems and GPS devices switch to dark mode after sunset.

How do I view AO3 in dark mode? ›

how to get dark mode on AO3
  1. Step one: log into your account. ...
  2. Step two: scroll all the way down to the bottom of any page on AO3 and tap on the word Reversi in the footer.
  3. Step three: tapping on Reversi will take you to a new page showing the code for the Reversi site skin.

How do you make Wiki fandom dark mode? ›

If you want to make sure your experience is consistent across all Fandom wikis, it's possible to do that via your preferences. In the Appearance section of the preferences, you can select whatever you consider the most ideal experience: light, dark, or defer to a wiki's preset theme.

How do I open a website in dark mode? ›

Turn on Dark theme
  1. On your Android device, open Chrome .
  2. At the top right, tap More Settings. Theme.
  3. Choose the theme you'd like to use: System Default if you want to use Chrome in Dark theme when Battery Saver mode is turned on or your mobile device is set to Dark theme in device settings.

How do I view maps in dark mode? ›

Turn on dark theme while you explore
  1. On your Android phone 10+ phone, open the Google Maps app .
  2. Tap your profile picture or initial Settings. Theme.
  3. Select one of the following options: Always in light theme: Dark theme is always disabled in Maps, regardless of system settings. ...
  4. Tap Save.

References

Top Articles
Latest Posts
Recommended Articles
Article information

Author: Edwin Metz

Last Updated:

Views: 5712

Rating: 4.8 / 5 (58 voted)

Reviews: 89% of readers found this page helpful

Author information

Name: Edwin Metz

Birthday: 1997-04-16

Address: 51593 Leanne Light, Kuphalmouth, DE 50012-5183

Phone: +639107620957

Job: Corporate Banking Technician

Hobby: Reading, scrapbook, role-playing games, Fishing, Fishing, Scuba diving, Beekeeping

Introduction: My name is Edwin Metz, I am a fair, energetic, helpful, brave, outstanding, nice, helpful person who loves writing and wants to share my knowledge and understanding with you.