Help:Dark mode

The wiki's dark mode applies a night theme to the website. This page outlines how it is enabled and provides information for editors on working with dark mode.

Theme choice

By default, the wiki respects your system color theme and will display either light or dark mode accordingly. However, you may toggle between modes at any time by clicking the moon icon in the top-right on MonoBook or Vector, or by clicking the link in the footer on other skins.

You may also lock-in to dark mode by enabling the dark mode gadget. Doing so will disable the toggle and always show dark mode.

Dark mode tools

There are a few key tools which enable editors to work with dark mode.

Dark variables

Dark variables are set in an element's style attribute and define colors to apply in dark mode.

• --darkcolor - Sets the text color in dark mode.
• --darkbg - Sets the background color in dark mode.
• --darkborder - Sets the border color in dark mode.

The dark parameter can be used to define a dark mode text color for the {{color}} template.

Example

This is an example

<span style="color:red;--darkcolor:#fff;background:yellow;--darkbg:#333;border:1px solid pink;--darkborder:#666">This is an example</span>

Invert classes

Invert classes are added to an element's class attribute and will invert its colors in the appropriate mode(s).

• invert - Invert an image or element in all modes.
• invert-dark - Invert an image or element in dark mode only.
• invert-light - Invert an image or element in light mode only.

The class parameter can be used to add an invert class to the {{color}} template.

Example

[[File:Mario Emblem.png|25px|class=invert-dark]]

Core styling

Core wiki features such as notices, wikitables, infoboxes, and navboxes are heavily overridden in dark mode since the original colors are too light. Tables without the wikitable class should be converted to wikitables so that they receive the proper dark styling in dark mode. If you wish to define table cell colors for dark mode, please make sure they are actually dark.

All of the table variables outlined here have a dark counterpart; just prepend the word "dark" in front: --darkbg, --darkborder, --darkevenbg, --darkoddbg, --darkbg1, --darkbg2, etc.

Example

Item	Present?
Mushroom	Yes
Fire Flower	No

{| class="wikitable"
! Item !! Present?
|-
| Mushroom
| style="background:#df8;--darkbg:#1D3512" | Yes
|-
| Fire Flower
| style="background:#d88;--darkbg:#600" | No
|}