The wiki'sdark 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 yoursystem 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.

Registered users also have the option to lock-in to dark mode by enabling the dark modegadget. 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

These variables can be set in any 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.

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

Example

This is an example

<span>This is an example</span>

Invert classes

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

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

Theclass 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 wikitables, galleries, infoboxes, and navboxes are overridden by default in dark mode since the original colors are too bright. However, there are more variables available to apply colors in dark mode. If you wish to define colors for dark mode, please make sure they are actuallydark.

Wikitables

Tables without the wikitable class should first be converted to wikitables so that they receive styling in dark mode. Any wikitables utilizing navboxseries classes will receive automatic coloration in both light and dark mode, and manually-styled tables can be customized for dark mode using variables.

The following variables can be defined within a wikitable's style attribute:

• --darkcolor: - The text color for regular table cells.
• --darkborder: - The border color of the table and cells.
• --darkbannercolor: - The text color for full-width headers.
• --darkbannerbg: - The background color for full-width headers.
• --darkheadercolor: - The text color for standard table headers.
• --darkheaderbg: - The background color for standard headers.
• --darkevenbg: - The background color for even cell rows.
• --darkoddbg: - The background color for odd cell rows.
• --darkbg: - The background color for all cell rows.

Column background variables as outlinedhere have dark mode counterparts as well; just prepend the word "dark" in front:--darkbg1,--darkbg2,--darkbg3, etc.

Not all of them are needed or even apply to every table. Many can be kept at their default value.

Example

Image	Name	Description
	Princess Toadstool	The princess of the Mushroom Kingdom. Bowser kidnaps her to prevent her from reversing the magic the Koopa used on the Mushroom People. She appears in the final course,8-4 where she thanks Mario for rescusing her and offers a "new quest" for him.
	Mushroom retainers	Seven Mushroom People that are servants of the princess and prisoners of the Koopa. They appear in every castle except for the final one. Mario can rescue a retainer by finishing a castle in World 1 to World 7. They'll say, "Thank you Mario/Luigi! But our princess is in another castle!"

Here is the source code for the above table:

{||-! Image !! Name !! Description|-| [[File:SMB Princess Toadstool Sprite.png]]| [[Princess Peach|Princess Toadstool]]| The princess of the Mushroom Kingdom. Bowser kidnaps her to prevent her from reversing the magic the Koopa used on the Mushroom People. She appears in the final course, [[World 8-4 (Super Mario Bros.)|8-4]] where she thanks Mario for rescusing her and offers a "[[Super Mario Bros.#Hard mode|new quest]]" for him.|-| [[File:SMB Mushroom Retainer Sprite.png]]| [[Toad (species)|Mushroom retainers]]| Seven Mushroom People that are servants of the princess and prisoners of the Koopa. They appear in every castle except for the final one. Mario can rescue a retainer by finishing a castle in World 1 to World 7. They'll say, "Thank you Mario/Luigi! But our princess is in another castle!"|}

Galleries

The custom background variables outlinedhere have dark counterparts as well; just prepend the word "dark" in front:--darkbg,--darkbg1,--darkbg2,--darkbg3, etc.

The dark versions are set alongside their light counterparts in the style attribute.

Example

• 

  Small Mario

• 

  Cheep-cheep

• 

  SmallLuigi

• 

  Mushroom retainer

Here is the source code for the above gallery:

<gallery>SMB Smallmario.png|[[Small Mario]]SMB Swimming Cheep Cheep Sprite.gif|[[Cheep Cheep|Cheep-cheep]]{{class|bg1}}SMB Small Luigi Sprite.png|Small [[Luigi]]SMBS-Toad-SharpX1.png|[[Toad (species)|Mushroom retainer]]{{class|blackbg}}</gallery>

Dark mode only

• 

  Sprite fromSuper Mario Land

• 

  Sprite of a Pipe Cannon fromSuper Mario Land

• 

  Artwork fromSuper Mario Land

Here is the source code for the above gallery:

<gallery>SML Bullet Biff Sprite.png|Sprite from ''Super Mario Land''{{class|darkbg1}}SML Sprite Pipe Cannon.png|Sprite of a Pipe Cannon from ''Super Mario Land''{{class|darkbg1}}SML Bullet Biff Artwork.png|Artwork from ''Super Mario Land''</gallery>

Infoboxes

Addthese and/orthese variables to an infobox's TemplateStyles or its style attribute if it doesn't have one. Both sets of those variables are ordered by what should usually be the lightest color to the darkest.

Here is the full list of infobox variables:

• --darkcolor: - The text color for the infobox.
• --darkborder: - The infobox outside border color.
• --darkbannercolor: - The text color of the top banner.
• --darkbannerbg: - The background color of the top banner.
• --darkbannerborder: - The border color of the top banner.
• --darksubbannercolor: - The text color of any subbanners.
• --darksubbannerbg: - The background color of the subbanner.
• --darkheadercolor: - The header color for any other headers.
• --darkheaderbg: - The background color for any other headers.
• --darkrowcolor: - The text color used for the primary info rows.
• --darkrowevenbg: - The background color for the even info rows.
• --darkrowoddbg: - The background color for the odd info rows.
• --darkrowbg: - The background color for all the info rows.
• --darkrowborder: - The border color of the main rows.
• --darkfooterbg: - The background color of the footer.
• --darkbg: - The main infobox background color.

Not all of them are needed or even apply to every template. Many can be kept at their default value.

Wide infoboxes

Wide infobox coloration behaves differently from template to template depending how it was set up. Add the needed variables to a wide infobox's style attribute.

The following variables are available for wide infoboxes:

• --darkcolor: - The text color within the infobox.
• --darkbannercolor: - The text color for the top banner.
• --darkbannerbg: - The background color for the top banner.
• --darkbannerborder: - The border color for the top banner.
• --darksubbannercolor: - The text color for any subbanners.
• --darksubbannerbg: - The background color for the subbanner.
• --darkheadercolor: - The text color for any other headers.
• --darkheaderbg: - The background color for any other headers.
• --darkrowcolor: - The text color for the main information rows.
• --darkrowevenbg: - The background color for the even info rows.
• --darkrowoddbg: - The background color for the odd info rows.
• --darkrowbg: - The background color for all the info rows.
• --darkfooterbg: - The background color for the notes.
• --darkrowborder: - The border color for the main rows.
• --darkborder: - The main border color of the infobox.
• --darkbg: - The main background color of the infobox.

Not all of them are needed or even apply to every template. Many can be kept at their default value.

Navboxes

For class-based navboxes,these variables are added to the navbox CSS page by the developer. For manually-styled navboxes, the same variables can beadded to the navbox template's style attribute. That variable order is what should be the lightest color to the darkest (the progression is the opposite of light mode).

Here is the full list of dark navbox variables:

• --darkcolor: - The main text color.
• --darkoutline: - The outside border color.
• --darkbannercolor: - The top banner text color.
• --darkbannerbg: - The top banner background color.
• --darksubbannercolor: - Subbanner and footer text color.
• --darksubbannerbg: - Subbanner and footer background color.
• --darkheadercolor: - The text color used in the headers.
• --darkheaderbg: - The background color for the headers.
• --darksubheadercolor: - The text color for subheaders.
• --darksubheaderbg: - The subheader background color.
• --darkevenbg: - The even row background color.
• --darkoddbg: - The odd row background color.
• --darkbg: - The outside background color.

Not all of them are needed or even apply to every template. Many can be kept at their default value.

• Help