Help:Dark mode
The wiki's dark mode applies a night theme to the website. This page outlines how it is enabled and provides some 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.
Custom styling
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 and should largely stay that way, unless there is an issue communicating information to the reader. Tables without the wikitable class should be converted to wikitables so that they receive the proper dark styling in dark mode. If you do wish to define cell colors for dark mode, they should actually be dark.
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
|}
