Wikipedia:Dark Mode/Inhalte
Diese Seite enthält Hinweise und Anleitungen, wie Seiteninhalte an den Dark Mode angepasst werden und wie diese Anpassung gesteuert, verfeinert oder gegebenenfalls unterbunden werden kann.
Die hier beschriebenen Anpassungsmöglichkeiten werden entweder durch zentrale Stylesheets oder das projekteigene Gadget dewikiDarkmode bereitgestellt.
Automatische Anpassungen
[Quelltext bearbeiten]Textfarbe
[Quelltext bearbeiten]Die Farbe von unverlinktem Text ändert sich von schwarz auf weiß. Ausnahmen hiervon sind:
- Bereiche, in denen die Textfarbe explizit festgesetzt ist (inline per
style="color: [...]"). Diese Farbe bleibt auch beim Wechsel zum Dark Mode erhalten. - Bereiche, in denen eine Hintergrundfarbe festgelegt ist (inline per
style="background: [...]"). Für diese wird angenommen, dass sie ursprünglich für die Verwendung im hellen Modus (schwarzer Text auf farbigem Grund) konzipiert worden sind und eine Änderung der Textfarbe zu Kontrastproblemen führt. In diesen Bereichen bleibt die schwarze Textfarbe erhalten.- Mitunter wird per
style="background: inherit"oderstyle="background: transparent"ein transparenter Hintergrund angefordert. Da in den CSS-Regeln für vorgenannten Mechanismus nach dem Schlüsselwort background gesucht wird, wird in diesen Fällen die Textfarbe schwarz belassen, obwohl sich der transparente Hintergrund an den Dark Mode anpasst. Dadurch wird der Text unlesbar. style="background: inherit"oderstyle="background: transparent"sind in den meisten Fällen unnötig und können entfernt werden, um Kompatibilität mit dem Dark Mode herzustellen.
- Mitunter wird per
Beispiel:
<div style="border:1px solid;">Die Textfarbe ändert sich in diesem Kasten je nach Anzeigemodus.</div>
<div style="background-color:#aaeeee; border:1px solid;">Die Textfarbe ändert sich in diesem Kasten nicht, weil eine Hintergrundfarbe gesetzt ist.</div>
<div style="background-color:transparent; border:1px solid;">Dieser Text wird im Dark Mode unlesbar.</div>
Die Farbe von Blau- und Rotlinks wird auf die dunkle Umgebung abgestimmt. Durch die hellere Farbe von Links kann es dazu kommen, dass Kontrastprobleme im Dark Mode entstehen.
Hintergrundfarbe
[Quelltext bearbeiten]Explizit definierte Hintergrundfarben bleiben im Dark Mode standardmäßig erhalten, sofern es sich nicht um eine Infobox handelt. Drei in der deutschsprachigen Wikipedia verfügbare Farbklassen passen sich automatisch dem Dark Mode an, da ihre Farbe der eines zentralen Stilelements von MediaWiki entspricht, das im Dark Mode ebenfalls angepasst wird:
| Klassenname | Farbe | Wirkung und Verwendung | |
|---|---|---|---|
| Heller Modus | Dunkler Modus | ||
| hintergrundfarbe-basis | #FFFFFF | #101418 | entspricht der Farbe des Seitenhintergrundes |
| hintergrundfarbe1 | #F8F9FA | #202122 | entspricht der Farbe einer wikitable-Tabellenzelle |
| hintergrundfarbe5 | #EAECF0 | #27292D | entspricht der Farbe eines wikitable-Tabellenkopfes |
Beispiel:
<div class="hintergrundfarbe-basis">Dieser Bereich hat in beiden Anzeigemodi die Farbe des Seitenhintergrunds.</div>
<div class="hintergrundfarbe1">Dieser Bereich hat in beiden Anzeigemodi die Farbe einer wikitable-Tabellenzeile.</div>
<div class="hintergrundfarbe5">Dieser Bereich hat in beiden Anzeigemodi die Farbe einer wikitable-Kopfzeile.</div>
Rahmenfarbe
[Quelltext bearbeiten]Ähnlich wie die Hintergrundfarben verhalten sich die Rahmenfarben. Auch hier gibt es zwei Farbklassen, die für den Dark Mode angepasste Farben bereitstellen:
| Klassenname | Farbe | Wirkung und Verwendung | |
|---|---|---|---|
| Heller Modus | Dunkler Modus | ||
| rahmenfarbe1 | #A2A9B1 | #72777D | entspricht der Farbe des Rahmens bei Inhaltsverzeichnis und wikitable-Tabellen |
| rahmenfarbe2 | #EAECF0 | #404244 | entspricht der Farbe des Rahmens von Miniatur-Vorschaubildern |
| rahmenfarbe5 | #202122 | #EAECF0 | mit hohem Kontrast zur Umgebung |
Beispiel:
<div class="rahmenfarbe1" style="border-style:solid;">Dieser Kasten hat in beiden Anzeigemodi die Rahmenfarbe einer wikitable-Tabelle.</div>
<div class="rahmenfarbe2" style="border-style:solid;">Dieser Kasten hat in beiden Anzeigemodi die Rahmenfarbe der Miniatur-Vorschaubilder.</div>
Infoboxen
[Quelltext bearbeiten]In der deutschsprachigen Wikipedia gibt es zahlreiche verschiedene Infoboxen und diese werden in vielen Artikeln verwendet. Oftmals machen sie häufigen Gebrauch von einer eigenen Farbgestaltung. Um dadurch entstehende Kontrastprobleme bei einer Vielzahl von Artikeln auf einmal zu beheben, werden Infoboxen mit speziellen CSS-Regeln für den Dark Mode „entfärbt“, d.h. auf standardisierte Farben zurückgeführt. In diesem Fall werden inline und per TemplateStyles definierte Farbdeklarationen überschrieben.
Um eine gesamte Infobox oder Bereiche davon von dieser Überschreibung auszunehmen, kann die notheme-Klasse verwendet werden. Derart ausgeschlossene Bereiche sollten dann aber im Dark Mode keine Anzeigeprobleme durch fehlenden Kontrast oder ein zu grelles Hervorstechen vor dem dunklen Seitenhintergrund verursachen.
Explizit angeforderte Anpassungen
[Quelltext bearbeiten]Hintergrundfarbe im Dark Mode überschreiben
[Quelltext bearbeiten]Falls für den hellen Modus nicht bedeutungstragende Hintergrundfarben (entweder über Farbklassen oder als Inline-Hintergrundfarbe) definiert sind, die im Dark Mode störend wirken würden, können diese durch die Angabe zusätzlicher CSS-Klassen auf drei „Grundschattierungen“ zurückgeführt werden, die auch von MediaWiki verwendet werden.
| Klasse | Farb- überschreibung |
Beispiel |
|---|---|---|
darkmode-hintergrundfarbe-basis(entspricht hintergrundfarbe-basis)
|
#101418 | hell: gelb dunkel: Seitenhintergrund |
darkmode-hintergrundfarbe-passiv(entspricht hintergrundfarbe1)
|
#202122 | hell: orange dunkel: Tabellenhintergrund |
darkmode-hintergrundfarbe-neutral(entspricht hintergrundfarbe5)
|
#27292d | hell: blau dunkel: Kopfzeilenhintergrund |
Beispiel:
<div class="darkmode-hintergrundfarbe-passiv" style="background-color:#aaeeee;">Dieser Kasten ist im hellen Modus türkisfarben und im Dark Mode dunkelgrau.</div>
Inhalte farbinvertieren
[Quelltext bearbeiten]Mit den CSS-Klassen skin-invert und skin-invert-image lässt sich ein automatischer Invertierungsfilter auf den umschlossenen Inhalt anwenden.
skin-invert ist geeignet für alle Inhalte außer Bilder und Grafiken.
Beispiel:
<div class="skin-invert" style="background-color:#eeeeee; border:1px solid #000000;">Dieser Kasten ist im hellen Modus hellgrau mit schwarzem Rahmen und im Dark Mode dunkelgrau mit weißem Rahmen.</div>
skin-invert-image invertiert nur Grafiken und Bilder, lässt aber umgebende Elemente, wie etwa die Rahmen von Vorschaubildern, unangetastet.
Beispiel:
[[Datei:Aeropuerto.svg|miniatur|center|hochkant=0.5|klasse=skin-invert-image|heller Modus: weißes Flugzeug auf schwarzem Grund, dunkler Modus: schwarzes Flugzeug auf weißem Grund.]]
Inhalte vom Dark Mode ausnehmen
[Quelltext bearbeiten]Standardmäßig werden Inhalte farblich an den Dunkelmodus angepasst. Soll dies für einen bestimmten Teil einer Seite unterbunden werden, kann dieser mit der CSS-Klasse notheme gekennzeichnet werden.
Beispiel:
{| class="wikitable"
| Diese Tabelle wird für den Dark Mode angepasst.
|}
{| class="wikitable notheme"
| Diese Tabelle behält die Farben aus dem hellen Modus.
|}
| Diese Tabelle wird für den Dark Mode angepasst. |
| Diese Tabelle behält ihre Farben aus dem hellen Modus. |
Inhalte nur im Dark Mode anzeigen oder ausblenden
[Quelltext bearbeiten]Es können bestimmte Inhalte nur bei aktiviertem Dark Mode und andere nur im hellen Standardmodus dargestellt werden. Dazu sind die CSS-Klasse darkmode-only und darkmode-hide verfügbar.
Sinnvoll kann dies etwa sein, um ein für den Dark Mode optimiertes Piktogramm o.Ä. anstelle eines für den hellen Modus ausgelegten Pendants anzuzeigen. Enzyklopädische Artikelinhalte dürfen nicht vom Anzeigemodus abhängen und somit nicht wahlweise versteckt oder angezeigt werden.
darkmode-only blendet Inhalte nur im Dark Mode ein und benötigt die Stilzuweisung display:none;, um den Inhalt standardmäßig (im hellen Modus) auszublenden.
Beispiel:
Dieser Satz erscheint immer, unabhängig vom Anzeigemodus. <span class="darkmode-only" style="display:none;">Dieser Satz erscheint nur im Dark Mode.</span>
Dieser Satz erscheint immer, unabhängig vom Anzeigemodus.
darkmode-hide blendet den damit umschlossenen Inhalt im Dark Mode aus und benötigt keine weitere Stilzuweisungen.
Beispiel:
Dieser Satz erscheint immer, unabhängig vom Anzeigemodus. <span class="darkmode-hide">Dieser Satz erscheint nicht im Dark Mode.</span>
Dieser Satz erscheint immer, unabhängig vom Anzeigemodus. Dieser Satz erscheint nicht im Dark Mode.
TemplateStyles
[Quelltext bearbeiten]In TemplateStyles kann auf den Dark Mode reagiert werden, indem auf das Vorhandensein der Klassen skin-theme-clientpref-night (immer Dark Mode) bzw. skin-theme-clientpref-os (Dark Mode abhängig von System- bzw. Browsereinstellung) im html-Element des aktuellen Dokuments geprüft wird.
Es gibt keine Klasse, die sowohl den „erzwungenen“ als auch den von den Systemeinstellungen abhängigen Dark Mode repräsentiert, deshalb müssen Definitionen in den TemplateStyles immer für beide Fälle wie folgt definiert werden:
/* erzwungener Dark Mode */
@media screen {
html.skin-theme-clientpref-night .meine-klasse {
/* hier jeweils identische CSS-Definitionen für .meine-klasse */
}
}
/* Dark Mode nach Systemeinstellung */
@media screen and (prefers-color-scheme: dark)
html.skin-theme-clientpref-os .meine-klasse {
/* hier jeweils identische CSS-Definitionen für .meine-klasse */
}
}
Die Klasse, die den „erzwungenen“ hellen Modus kennzeichnet, ist skin-theme-clientpref-day. In der Regel müssen die Standarddefinitionen für den hellen Modus aber nicht mit dieser Klasse kombiniert werden, weil die CSS-Definitionen für den Dark Mode eine höhere Spezifität aufweisen und somit im Anwendungsfall Vorrang vor den Standarddefinitionen haben.
Ein einfaches Beispiel für darkmode-spezifische Regeln in TemplateStyles ist Vorlage:Stammbaum/styles.