Sinds juli 2024 biedt de vormgeving Vector 2022 (de standaardvormgeving) een donkere modus (nachtmodus, dark mode) aan, ook de smartphone-apps en mobiele website beschikken al langere tijd over deze functie.
Aan de rechterkant van het scherm bevindt zich de sectie "Uiterlijk", dit menu kan zich ook bevinden onder het icoontje met een bril rechtsboven. Hier is de optie "Kleur" beschikbaar, waar je kunt kiezen tussen "Automatisch", "Licht" en "Donker". Bij automatisch houdt Wikipedia rekening met de instellingen van je computer of mobiel apparaat.
Op dit moment is de functie alleen beschikbaar voor ingelogde gebruikers, wanneer de meeste problemen zijn opgelost komt deze beschikbaar voor iedereen.
Pagina's geschikt maken voor de donkere modus
Gezien de Nederlandstalige Wikipedia al sinds 2001 bestaat is de kans aanwezig dat artikelen beschikken over opmaak waarmee geen rekening gehouden is met de komst van een donkere modus. Denk hierbij aan het gebruik van achtergrondkleuren en zwarte illustraties met een transparante achtergrond.
Achtergrondkleuren
Indien een achtergrondkleur is opgegeven moet er ook een tekstkleur worden opgegeven. De bestaande tekstkleur kan worden overgenomen met color:inherit;. De kleurtokens van Codex, het designsysteem van de Wikimedia Foundation, worden automatisch omgezet.
Tabellen
Net zoals hierboven genoemd moet er altijd een tekstkleur worden opgegeven. Bij veelvuldig gebruik van dezelfde kleuren op meerdere artikelen wordt het aangeraden om gebruik te maken van sjablonen, zoals {{Tabelcel gewonnen}}. Daarnaast is het voor lezers fijn om de standaardopmaak met de class wikitable of toccolours aan te houden.
Zijbalken
Het wordt aangeraden om het sjabloon {{Zijbalk generiek}} te gebruiken, deze negeert de bestaande opgegeven kleuren bij het gebruik van de donkere modus.
Afbeeldingen
Afbeeldingen kunnen automatisch worden omgezet met de class skin-invert-image, dit is vooral handig voor logo's en simpele illustraties.
Voorbeeld bij een thumbnail:
[[Bestand:OOjs UI icon lightbulb.svg|thumb|100px|class=skin-invert-image]]
|
|
| Afbeelding zonder de class | Afbeelding met de class |
Handtekeningen
Wees er bij het maken van een aangepaste handtekening van bewust dat deze ook leesbaar is op een donker scherm.
TemplateStyles en andere stylesheets
In TemplateStyles en in je (persoonlijke) MediaWiki:Vector-2022.css (of MediaWiki:Common.css) is het mogelijk om de donkere modus te herkennen en vervolgens andere kleuren op te geven.
Voorbeeld:
/ * Donkere modus */
@media screen {
html.skin-theme-clientpref-night .pane {
background-color: black;
color: white;
}
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .pane {
background-color: black;
color: white;
}
}
De eerste optie, .skin-theme-clientpref-night, is de donkere modus. De tweede optie, .skin-theme-clientpref-os, is de automatische modus. Het is nodig om beide te gebruiken omdat bezoekers ook scripts of browserinstellingen kunnen gebruiken die de donkere modus op websites forceren. Bij het gebruik van de Codex-tokens is het @media-gedeelte overbodig.