|
|
| (11 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| 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.
| | {{nw|{{external image|https://www.porplemontage.com/porple.png|55px}} [[File:Mario Boards logo.svg|link=]]}} |
|
| |
|
| == Theme choice ==
| | [[File:Think Tank End 7.png|thumb|The ending to Think Tank]] |
| By default, the wiki respects your [https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme 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 [[Special:Preferences#mw-prefsection-gadgets|gadget]]. Doing so will disable the toggle and always show dark mode.
| | {{multiple image |
| | |align=left |
| | |footer=''Super Mario'' characters |
|
| |
|
| == Custom styling == | | |image1=NSMBW Mario Solo Artwork.png |
| There are a few key tools which enable editors to work with dark mode.
| | |width1=83 |
| | |caption1=Mario |
| | |alt1=The plumber |
|
| |
|
| === Dark variables === | | |image2=NSMBW Luigi Solo Artwork.png |
| Dark variables are set in an element's style attribute and define colors to apply in dark mode.
| | |width2=72 |
| | |caption2=Luigi |
| | |alt2=Mario's younger brother |
|
| |
|
| *<code>--darkcolor</code> - Sets the text color in dark mode.
| | |image3=NSMBWiiPeach.png |
| *<code>--darkbg</code> - Sets the background color in dark mode.
| | |width3=72 |
| *<code>--darkborder</code> - Sets the border color in dark mode.
| | |caption3=Princess Peach |
| | |alt3=Damsel in distress |
|
| |
|
| The <code>dark</code> parameter can be used to define a dark mode text color for the {{tem|color}} template.
| | |image4=NSMBW Bowser Artwork.png |
| | |width4=97 |
| | |caption4=Bowser |
| | |alt4=King Koopa |
| | }} |
|
| |
|
| ==== Example ====
| |
| <span style="color:red;--darkcolor:#fff;background:yellow;--darkbg:#333;border:1px solid pink;--darkborder:#666">This is an example</span>
| |
| <pre><span style="color:red;--darkcolor:#fff;background:yellow;--darkbg:#333;border:1px solid pink;--darkborder:#666">This is an example</span></pre>
| |
|
| |
|
| === Invert classes === | | {{foreign names|origin=Kor |
| Invert classes are added to an element's class attribute and will invert its colors in the appropriate mode(s).
| | |Jpn=スーパーマリオギャラクシー |
| | |JpnR=Sūpā Mario Gyarakushī |
| | |JpnM=Super Mario Galaxy |
| | |Kor=슈퍼 마리오 Wii 갤럭시 어드벤처 |
| | |KorR=Syupeo Mario Wii Gaelleoksi Eodeubencheo |
| | |KorM=Super Mario Wii: Galaxy Adventure |
| | |ChiT=超級瑪利歐銀河 |
| | |ChiTR=Chāojí Mǎlìōu Yínhé |
| | |ChiTM=Super Mario Galaxy |
| | |ChiS=超级马力欧银河 |
| | |ChiSR=Chāojí Mǎlìōu Yínhé |
| | |ChiSM=Super Mario Galaxy |
| | }} |
|
| |
|
| *<code>invert</code> - Invert an image or element in all modes.
| | {{aboutfile |
| *<code>invert-dark</code> - Invert an image or element in dark mode only.
| | |1=A [[Crockoid]] covered in concrete from ''[[Donkey Kong Bananza]]'' |
| *<code>invert-light</code> - Invert an image or element in light mode only.
| | |2=[https://www.youtube.com/watch?v=bG2u334HfFc Donkey Kong Bananza – Exploration Gameplay – Nintendo Treehouse: Live {{!}} Nintendo Switch 2] |
| | | |4=Cropped |
| The <code>class</code> parameter can be used to add an invert class to the {{tem|color}} template.
| | }} |
| | |
| ==== Example ====
| |
| [[File:Mario Emblem.png|25px|class=invert-dark]] | |
| <pre>[[File:Mario Emblem.png|25px|class=invert-dark]]</pre>
| |
| | |
| == 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 ===
| |
| {| class="wikitable"
| |
| ! Item !! Present?
| |
| |-
| |
| | Mushroom
| |
| | style="background:#df8;--darkbg:#1D3512" | Yes
| |
| |-
| |
| | Fire Flower
| |
| | style="background:#d88;--darkbg:#600" | No
| |
| |}
| |
| | |
| <pre>
| |
| {| class="wikitable" | |
| ! Item !! Present? | |
| |- | |
| | Mushroom
| |
| | style="background:#df8;--darkbg:#1D3512" | Yes
| |
| |-
| |
| | Fire Flower
| |
| | style="background:#d88;--darkbg:#600" | No
| |
| |}
| |
| </pre>
| |
| | |
| {{MarioWiki}}
| |
| [[Category:Help]]
| |
