Cowboy: Die Seite wurde neu angelegt: „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 == === Textfarbe === Die Farb…“

2025-03-05T18:43:18Z

Die Seite wurde neu angelegt: „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 == === Textfarbe === Die Farb…“

Neue Seite

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 [[CowboysWiki:Technik/Skin/Gadgets/dewikiDarkmode|dewikiDarkmode]] bereitgestellt.

== Automatische Anpassungen ==
=== Textfarbe ===
Die Farbe von '''unverlinktem Text''' ändert sich von schwarz auf weiß. Ausnahmen hiervon sind:
* Bereiche, in denen die Textfarbe explizit festgesetzt ist (etwa per Inline-Stilangabe <code>style="color: [...]"</code>). Diese Farbe bleibt auch beim Wechsel zum Dark Mode erhalten.
* Bereiche, in denen eine Hintergrundfarbe festgelegt ist (etwa per Inline-Stilangabe <code>style="background: [...]"</code>). 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 <code>style="background: inherit"</code> oder <code>style="background: transparent"</code> 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.
** <code>style="background: inherit"</code> oder <code>style="background: transparent"</code> sind in den meisten Fällen unnötig und können entfernt werden, um Kompatibilität mit dem Dark Mode herzustellen.

{{Kasten|1=Beispiel:
<syntaxhighlight lang="wikitext">
<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>
</syntaxhighlight>
<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>
}}

=== Linkfarbe ===
Die Farbe von '''Blau- und Rotlinks''' wird auf die dunkle Umgebung abgestimmt und die Farben entsprechend etwas aufgehellt.

Davon ausgenommen sind Bereiche, in denen eine Hintergrundfarbe festgelegt ist (etwa per Inline-Stilangabe <code>style="background: [...]"</code>). Für diese wird angenommen, dass sie ursprünglich für die Verwendung im hellen Modus konzipiert worden sind und eine Aufhellung der Linkfarbe zu Kontrastproblemen führt. In diesen Bereichen wird eine dunkle Linkfarbe gewählt. Dabei ist zu beachten:
* Mitunter wird per <code>style="background: inherit"</code> oder <code>style="background: transparent"</code> 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 Linkfarbe abgedunkelt, obwohl sich der transparente Hintergrund an den Dark Mode anpasst. Dadurch wird der Text unlesbar.
* <code>style="background: inherit"</code> oder <code>style="background: transparent"</code> sind in den meisten Fällen unnötig und können entfernt werden, um Kompatibilität mit dem Dark Mode herzustellen.
* Da die Erkennung nicht in allen Fällen einwandfrei funktioniert, kann einem Element die CSS-Klasse <code>darkmode-standardlinks</code> zugewiesen werden, um die Abdunklung der Linkfarbe zu unterbinden.

Um die gleiche Linkfarbe wie im hellen Modus zu verwenden, kann dem betroffenen Element die [[#Inhalte vom Dark Mode ausnehmen|notheme-Klasse]] zugewiesen werden. Unter Umständen hat dies aber Nebenwirkungen und sollte daher ausgiebig getestet werden.

=== Hintergrundfarbe ===
Explizit definierte '''Hintergrundfarben''' bleiben im Dark Mode standardmäßig erhalten, sofern es sich nicht um eine [[#Infoboxen|Infobox]] handelt. Drei in der deutschsprachigen Wikipedia verfügbare [[Hilfe:Farbe#Klassen|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:

{| id="hintergrundfarben" class="wikitable" style="min-width:90ex"
|-
! rowspan="2" | Klassenname
! colspan="2" | Farbe
! rowspan="2" | Wirkung und Verwendung
|-
! Heller Modus
! Dunkler Modus
|-
| hintergrundfarbe-basis
| style="text-align:center; background-color:#{{Standardfarbe|hintergrund|basis}}" | #{{Standardfarbe|hintergrund|basis|ucase=1}}
| style="text-align:center; background-color:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}" | #{{Standardfarbe|hintergrund|basis|mode=dark|ucase=1}}
| entspricht der Farbe des Seitenhintergrundes
|-
| hintergrundfarbe1
| style="text-align:center; background-color:#{{Standardfarbe|hintergrund|1}}" | #{{Standardfarbe|hintergrund|1|ucase=1}}
| style="text-align:center; background-color:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}" | #{{Standardfarbe|hintergrund|1|mode=dark|ucase=1}}
| entspricht der Farbe einer wikitable-Tabellenzelle
|-
| hintergrundfarbe5
| style="text-align:center; background-color:#{{Standardfarbe|hintergrund|5}}" | #{{Standardfarbe|hintergrund|5|ucase=1}}
| style="text-align:center; background-color:#{{Standardfarbe|hintergrund|5|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}" | #{{Standardfarbe|hintergrund|5|mode=dark|ucase=1}}
| entspricht der Farbe eines wikitable-Tabellenkopfes
|}

{{Kasten|1=Beispiel:
<syntaxhighlight lang="wikitext">
<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>
</syntaxhighlight>
<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 ===
Ähnlich wie die Hintergrundfarben verhalten sich die '''Rahmenfarben'''. Auch hier gibt es zwei Farbklassen, die für den Dark Mode angepasste Farben bereitstellen:

{| id="rahmenfarben" class="wikitable" style="min-width:90ex"
|-
! rowspan="2" | Klassenname
! colspan="2" | Farbe
! rowspan="2" | Wirkung und Verwendung
|-
! Heller Modus
! Dunkler Modus
|-
| rahmenfarbe1
|style="text-align:center"| <span style="border-style: solid; border-width: 2px; border-color:#{{Standardfarbe|rahmen|1}}; margin: 2px;">#{{Standardfarbe|rahmen|1|ucase=1}}</span>
|style="text-align:center; background-color:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}"| <span style="border-style: solid; border-width: 2px; border-color:#{{Standardfarbe|rahmen|1|mode=dark}}; margin: 2px;">#{{Standardfarbe|rahmen|1|mode=dark|ucase=1}}</span>
| entspricht der Farbe des Rahmens bei Inhaltsverzeichnis und wikitable-Tabellen
|-
| rahmenfarbe2
|style="text-align:center"| <span style="border-style: solid; border-width: 2px; border-color:#{{Standardfarbe|rahmen|2}}; margin: 2px;">#{{Standardfarbe|rahmen|2|ucase=1}}</span>
|style="text-align:center; background-color:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}"| <span style="border-style: solid; border-width: 2px; border-color:#{{Standardfarbe|rahmen|2|mode=dark}}; margin: 2px;">#{{Standardfarbe|rahmen|2|mode=dark|ucase=1}}</span>
| entspricht der Farbe des Rahmens von Miniatur-Vorschaubildern
|-
| rahmenfarbe5
|style="text-align:center"| <span style="border-style: solid; border-width: 2px; border-color:#{{Standardfarbe|rahmen|5}}; margin: 2px;">#{{Standardfarbe|rahmen|5|ucase=1}}</span>
|style="text-align:center; background-color:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}}"| <span style="border-style: solid; border-width: 2px; border-color:#{{Standardfarbe|rahmen|5|mode=dark}}; margin: 2px;">#{{Standardfarbe|rahmen|5|mode=dark|ucase=1}}</span>
| mit hohem Kontrast zur Umgebung
|}

{{Kasten|1=Beispiel:
<syntaxhighlight lang="wikitext">
<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>
</syntaxhighlight>
<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 ===
In der deutschsprachigen Wikipedia gibt es zahlreiche verschiedene '''[[Hilfe:Infobox|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 [[#Inhalte vom Dark Mode ausnehmen|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 ==
=== Hintergrundfarbe im Dark Mode überschreiben ===
Falls für den hellen Modus nicht bedeutungstragende Hintergrundfarben (entweder über [[Hilfe:Farben#Klassen|Farbklassen]] oder als Inline-Hintergrundfarbe) definiert sind, die im Dark Mode störend wirken würden, können diese durch die Angabe zusätzlicher [[Hilfe:CSS#Klassen und Stile|CSS-Klassen]] auf drei „Grundschattierungen“ zurückgeführt werden, die auch von MediaWiki verwendet werden.

{| class="wikitable"
! Klasse
! Farb-<br>überschreibung
! Beispiel
|-
| <code>darkmode-hintergrundfarbe-basis</code><br><small>(entspricht <code>hintergrundfarbe-basis</code>)</small>
| style="background-color:#{{Standardfarbe|hintergrund|basis|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};" | #{{Standardfarbe|hintergrund|basis|mode=dark}}
| class="hintergrundfarbe3 darkmode-hintergrundfarbe-basis" | hell: gelb<br>dunkel: Seitenhintergrund
|-
| <code>darkmode-hintergrundfarbe-passiv</code><br><small>(entspricht <code>hintergrundfarbe1</code>)</small>
| style="background-color:#{{Standardfarbe|hintergrund|1|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};" | #{{Standardfarbe|hintergrund|1|mode=dark}}
| class="hintergrundfarbe4 darkmode-hintergrundfarbe-passiv" | hell: orange<br>dunkel: Tabellenhintergrund
|-
| <code>darkmode-hintergrundfarbe-neutral</code><br><small>(entspricht <code>hintergrundfarbe5</code>)</small>
| style="background-color:#{{Standardfarbe|hintergrund|5|mode=dark}}; color:#{{Standardfarbe|text|body|mode=dark}};" | #{{Standardfarbe|hintergrund|5|mode=dark}}
| class="hintergrundfarbe6 darkmode-hintergrundfarbe-neutral" | hell: blau<br>dunkel: Kopfzeilenhintergrund
|}

{{Kasten|1=Beispiel:
<syntaxhighlight lang="wikitext">
<div class="darkmode-hintergrundfarbe-passiv" style="background-color:#aaeeee;">Dieser Kasten ist im hellen Modus türkisfarben und im Dark Mode dunkelgrau.</div>
</syntaxhighlight>
<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 ===
Mit den CSS-Klassen <code>skin-invert</code> und <code>skin-invert-image</code> lässt sich ein automatischer Invertierungsfilter auf den umschlossenen Inhalt anwenden.

'''skin-invert''' ist geeignet für alle Inhalte außer Bilder und Grafiken.
{{Kasten|1=Beispiel:
<syntaxhighlight lang="wikitext">
<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>
</syntaxhighlight>
<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.
{{Kasten|1=Beispiel:
<syntaxhighlight lang="wikitext">
[[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.]]
</syntaxhighlight>
[[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 ===
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 <code>notheme</code> gekennzeichnet werden.

{{Kasten|1=Beispiel:
<syntaxhighlight lang="wikitext">
{| class="wikitable"
| Diese Tabelle wird für den Dark Mode angepasst.
|}
{| class="wikitable notheme"
| Diese Tabelle behält die Farben aus dem hellen Modus.
|}
</syntaxhighlight>
{{{!}} class="wikitable"
{{!}} Diese Tabelle wird für den Dark Mode angepasst.
{{!}}}
{{{!}} class="wikitable notheme"
{{!}} Diese Tabelle behält ihre Farben aus dem hellen Modus.
{{!}}}
}}

=== Inhalte nur im Dark Mode anzeigen oder ausblenden ===
Es können bestimmte Inhalte nur bei aktiviertem Dark Mode und andere nur im hellen Standardmodus dargestellt werden. Dazu sind die CSS-Klasse <code>darkmode-only</code> und <code>darkmode-hide</code> 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 <code>display:none;</code>, um den Inhalt standardmäßig (im hellen Modus) auszublenden.

{{Kasten|1=Beispiel:
<syntaxhighlight lang="wikitext">Dieser Satz erscheint immer, unabhängig vom Anzeigemodus. <span class="darkmode-only" style="display:none;">Dieser Satz erscheint nur im Dark Mode.</span></syntaxhighlight>
Dieser Satz erscheint immer, unabhängig vom Anzeigemodus. <span class="darkmode-only" style="display:none;">Dieser Satz erscheint nur im Dark Mode.</span>
}}

'''darkmode-hide''' blendet den damit umschlossenen Inhalt im Dark Mode aus und benötigt keine weitere Stilzuweisungen.
{{Kasten|1=Beispiel:
<syntaxhighlight lang="wikitext">Dieser Satz erscheint immer, unabhängig vom Anzeigemodus. <span class="darkmode-hide">Dieser Satz erscheint nicht im Dark Mode.</span></syntaxhighlight>
Dieser Satz erscheint immer, unabhängig vom Anzeigemodus. <span class="darkmode-hide">Dieser Satz erscheint nicht im Dark Mode.</span>
}}

== TemplateStyles ==
In [[Hilfe:TemplateStyles|TemplateStyles]] kann auf den Dark Mode reagiert werden, indem auf das Vorhandensein der Klassen <code>skin-theme-clientpref-night</code> (immer Dark Mode) bzw. <code>skin-theme-clientpref-os</code> (Dark Mode abhängig von System- bzw. Browsereinstellung) im <code>html</code>-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:

<syntaxhighlight lang="css">
/* 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 */
}
}
</syntaxhighlight>

Die Klasse, die den „erzwungenen“ hellen Modus kennzeichnet, ist <code>skin-theme-clientpref-day</code>. 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]].

CowboysWiki:Dark Mode/Inhalte - Versionsgeschichte