Wikipedia:Dark Mode

Abkürzung: WP:DARK
Vorführmodell der Darstellung eines Wikipedia-Artikels im Dark Mode

Ein Dark Mode, also ein Helle-Schrift-auf-dunklem-Hintergrund-Farbschema (auch: Dunkelmodus, Nachtmodus) wurde seit 2010 mehrfach als Option oder als Erweiterung für Wikipedia vorgeschlagen, auch auf Phabricator. Seit März 2025 sind in MediaWiki integrierte Dunkelmodi (für Vector 2022 und MinervaNeue) sowohl für angemeldete als auch unangemeldete Benutzer der deutschsprachigen Wikipedia aktiv.

Vorbemerkung

Eine praktische Einführung mit konkreter Hilfestellung und Lösung geben:

Die Wahl der richtigen Farbklassen ermöglicht recht einfach eine Lösung im Quelltext zur besseren Darstellung am Bildschirm. Ehemals bekannte, aber für den Dark Mode ungünstige Farben führen oft zu prinzipiellen Problemen in der optischen Darstellung und erzeugen zudem noch zusätzlichen technischen Wartungsaufwand.

MediaWiki

Seit April 2023 befanden sich Dark Modi u. a. für die Skins Vector 2022 und MinervaNeue in der Entwicklung. Das Projekt wurde unter mw:Reading/Web/Accessibility for reading geführt. Seit Mai 2024 besteht für angemeldete Benutzer über „Einstellungen – Beta-Funktionen“ die Möglichkeit, einen nativen Dunkelmodus zu aktivieren und seit März 2025 können auch nicht angemeldete Benutzer den Dark Mode aktivieren.

Aktivierung

  • Um den dunklen Modus im Vector-2022-Skin zu aktivieren, können Benutzer im Menü „Erscheinungsbild“ die Option „Dunkel“ auswählen. Dadurch werden die Seiten in diesem Wikimedia-Projekt entsprechend dargestellt, während sie in allen anderen Projekten den dortigen Einstellungen folgen.
  • Das funktioniert derzeit noch nicht auf allen Seiten. Bei den Seiten, die vom Dark Mode noch ausgenommen sind, steht im Erscheinungsbild-Menü der Eintrag: „Diese Seite ist immer im Tagesmodus“, und die Radio-Buttons sind ausgegraut.
  • Eleganter ist die zentrale Vorgabe des hellen oder dunklen Modus in den globalen Einstellungen des Kontos.
  • Die Einstellung „automatisch“ sorgt dafür, dass die Website den Einstellungen folgt, die der Benutzer an seinem Client für den Desktop ausgewählt hat.
  • Wer den WikimediaUI Dark mode standardmäßig aktiviert hat, sollte den Schalter für das Erscheinungsbild nicht auf „Automatisch“, sondern auf „Hell“ setzen.
  • Wer Browser-Erweiterungen wie den Dark Reader verwendet, sollte Wikipedia dort ausschließen und den Dark Mode entweder hart im „Erscheinungsbild“-Menü oder in den globalen Einstellungen vorgeben oder den Desktop-Einstellungen entsprechend automatisch auswählen.

Auswirkungen

Generell bewirkt der Dunkelmodus eine „Invertierung“ der Vorder- und Hintergrundfarbe, das heißt, der Artikeltext wird mit heller Schriftfarbe auf dunkler Hintergrundfarbe dargestellt. Zudem werden softwareseitig vorgegebene Farben, etwa für den Versionsvergleich oder wikitable-Tabellen, so angepasst, dass sie in einer dunklen Umgebung gut aussehen.

Sind im Seitentext Hintergrundfarben definiert, könnte diese Invertierung dazu führen, dass die helle Textfarbe vor der Hintergrundfarbe unleserlich wird. Aus diesem Grund behält der Dunkelmodus von MediaWiki die dunkle Textfarbe bei, wenn das gleiche Element (bspw. eine Tabellenzeile) gleichzeitig auch eine Hintergrundfarbe zugewiesen bekommen hat. Dieser Mechanismus funktioniert in den meisten Fällen, unter bestimmten Umständen kann es aber erforderlich sein, spezifische Anpassungen am Seitentext durchzuführen.

Infoboxen verlieren standardmäßig ihre benutzerdefinierte Farbgestaltung.

Die Vor- und Nachteile auf einen Blick:

  • Draußen/helles Licht: Light Mode (bessere Lesbarkeit)
  • Abends/dunkle Umgebung: Dark Mode (kein Blenden)
  • Lesen langer Texte: Light Mode (geringere Ermüdung)
  • Strom sparen (Akku, OLED): Dark Mode (effizientester Weg)

Inhalte im Dark Mode

Empfehlungen und Hinweise zur Anpassung von Seiteninhalten an den Dark Mode befinden sich auf Inhalte.

Technischer Hintergrund

Das „Umschalten“ zwischen hellem und dunklem Modus wird über die Änderung der Werte von CSS-Variablen realisiert. Die Rahmen-, Hintergrund- und Textfarben der Bestandteile der Benutzeroberfläche sowie der veränderlichen CSS-Klassen der deutschsprachigen Wikipedia werden nicht fest („hartkodiert“) auf einen Farbwert festgesetzt, sondern beziehen diesen aus einer CSS-Variable, die je nach Anzeigemodus eine Farbe für Hell- oder Dunkelmodus erhält.

Die spezifischen Anpassungen der Textfarben bei definierten Hintergrundfarben sowie für Infoboxen werden über ein Stylesheet eingebunden, das vom Gadget dewikiDarkmode bereitgestellt wird.

Fehler in der deutschsprachigen Wikipedia melden

Weitere Optionen

Dark Modi, die nur für Seiten der Wikipedia aktiv sind, können u. a. mittels CSS-Einstellungen aktiviert werden. Mit Browser-Extensions können alle (resp. die meisten) besuchten Seiten (auch außerhalb der Wikipedia) auf Dunkelmodus gestellt werden.

Browser-Erweiterungen

Plug-ins können die Darstellungen des Browsers verändern. Bei der Installation von Erweiterungen sollte man aber aus mehreren Gründen vorsichtig sein: zum Schutz von eigenen Daten, vor Schadsoftware und Werbung.

Es gibt mehrere Add-ons/Erweiterungen für Firefox und Chrome, die gut funktionieren. Eine ist Dark Mode for Wikipedia für Firefox bzw. Wikipedia Nachtmodus für Chrome, das nur ein einziges CSS-Stylesheet verwendet, um den Dark Mode nur auf Wikipedia zu aktivieren. Eine globale Lösung ist Dark Reader, mit dem bei allen Webseiten ein Dark Mode aktiviert werden kann (je nach Einstellung und Bedarf auch manuell nur für ausgewählte Tabs).

Es gibt Browsererweiterungen für gängige Browser, die einen Wikipedia-spezifischen dunklen Modus anbieten, und Browsererweiterungen, die es ermöglichen, benutzerdefinierte CSS für eine bestimmte Domain festzulegen, die mit den oben verfügbaren CSS verwendet werden können. Alle Browsererweiterungen müssen jedoch sorgfältig auf Sicherheitsprobleme geprüft werden, einige injizieren Werbung, und die Anpassung kann schwieriger sein als die Bearbeitung einer einzelnen CSS-Datei.

Browser-Einstellungen

In Google Chrome gibt es eine eingebaute experimentelle Beta-Einstellung, um den dunklen Modus zu erzwingen, die über chrome://flags/ mit der Beschreibung „Auto Dark Mode for Web Contents – Enabled“ aktiviert wird. Diese Funktion wird vom Chrome-Entwicklungsteam zur Verfügung gestellt, sodass eine hinreichende Sicherheit gegeben sein sollte. Sie stellt aber alle Webseiten im dunklen Modus dar. Die Funktion ist entsprechend auch in Microsoft Edge verfügbar, der auf der Basis von Google Chrome beruht, und zwar über das Menü, das über edge://flags/ aufgerufen werden kann.

Benutzerdefiniertes CSS

Für Benutzer mit Konto ist es am einfachsten, das gewünschte CSS des Designs in die Benutzeroberfläche zu importieren bzw. zu kopieren, unter „Benutzerdefiniertes CSS“. Dies erlaubt zudem mehrere Funktionen, wie: Benutzerdefinierte Farben, benutzerdefinierte Schriftarten oder das Ausblenden von nicht verwendeten UI-Elementen. Es stehen eine Reihe von vorgefertigten Dark-Mode-Skins zur Verfügung, auf den jeweiligen Seiten der Skins wird erklärt, wie man diese installieren kann:

Den CSS-Dunkelmodi fehlen oft Wikipedia-spezifische CSS-Klassen, was zu einer unerwarteten Darstellung der Seiten führen kann. Sie können jedoch nützliche Ideen für die Verbesserung Wikipedia-spezifischer Dark Modes liefern.

Andere CSS-Optionen sind:

Skins

MediaWiki’s Category:Skins with dark mode nennt Skin:Aether, Skin:Citizen, Skin:DarkCosmos, Benutzer:Aron Manning/Skin-Themen und Skin:Vector/DarkCSS als Skins, die einen Dunkelmodus anbieten. Diese sind jedoch in Wikimedia-Projekten nicht verfügbar.

Kompatibilität

Kompatibilitätstabelle
Timeless Vector (2022) Vector alt (2010) Minerva Neue MonoBook
WikimediaUI Dark mode          
Darklands dark theme          
DavidL’s DarkTheme          
Tollens' dark theme          
Vitaly Zdanevich's dark theme          
chrome://flags/  
Dark Reader   

Problemfall Grafiken

Beispiel für einen einfachen Farbfilter für Grafiken, durch den Informationen verloren gehen können

Ein besonderes Problem stellen Grafiken dar, die vielfach in Wikipedia eingebunden sind. Nicht nur Bilder (die farblich nicht invertiert werden sollen), auch kleine Grafiken, beispielsweise zur Markierung von Hinweisen oder in Infoboxen, sind betroffen. Sie wurden oft mit einem weißen Hintergrund gestaltet oder sie haben eine schwarze oder sonst dunkle Farbgebung. Beides mag in einer weißen Umgebung gut funktionieren, es passt aber nicht zu einem Dark Mode und sollte deshalb angepasst werden. Solche Unstimmigkeiten können auch mit einem CSS-Stylesheet nicht einfach und global behoben werden. Es kommt deshalb zur Überarbeitung bzw. zur Auswahl der in den Artikeln verwendeten Grafiken ein gewisser Aufwand auf die Community zu. Auch einfache Farbfilter, die Farben in Grafiken anpassen, können zur Folge haben, dass Informationen verloren gehen oder verfälscht werden. Farben können oft nicht automatisch an eine dunkle Darstellung angepasst werden, weil sie sich auf Angaben im Artikel beziehen, zum Beispiel auf die Farbgebung von Zellen in Tabellen. Deshalb ist der korrekte Umgang mit Grafiken beim Dark Mode eine komplexe Aufgabe.

Siehe auch

Wikipedia

Codex

Vorgaben für Farben in Wikimedia-Projekten:

Einzelnachweise

  1. ↑ ⚓ T26070 [GOAL] Provide a dark / night mode skin or theme. In: phabricator.wikimedia.org. (englisch).
  2. ↑ Community Wishlist Survey 2023/Reading/Dark mode - Meta. In: meta.wikimedia.org. (englisch).