Wikipedia:Technik/Skin/Gadgets/dewikiDarkmode

dewikiDarkmode

---

Das Gadget dewikiDarkmode ist nicht für Benutzerkonten konfigurierbar.

Es bewirkt Anpassungen und Klassendefinitionen für den Dunkelmodus („Dark Mode“).

Profil

dewikiDarkmode

dewikiDarkmode: spezifische Anpassungen für den Dunkelmodus
Eigenschaft	Zuweisung
default	Vorgabe für alle
hidden	versteckt
skins	vector-2022minerva
styles	dewikiDarkmode.css

* dewikiDarkmode[default|hidden|skins=vector-2022,minerva]|dewikiDarkmode.css

MediaWiki:Gadgets-definition

Aktive Spezifikation.

CSS

/* 
 * (1) 
 * VOM BENUTZER EXPLIZIT GESETZTER DARKMODE
 * Klasse skin-theme-clientpref-night im HTML-Tag gesetzt
 * Immer auch die korrespondierende Regel in (2) anpassen!
 */
@media screen {
	
	/* 
	 * == (1.1) ÜBERSCHREIBUNGEN FÜR DEN GESAMTEN INHALTSBEREICH ==
	 * Lokale Adaption des Darkmode-Hack-Stylesheets aus WikimediaMessages:
	 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/WikimediaMessages/+/refs/heads/master/modules/ext.wikimediamessages.styles/theme-night.less
	 * begrenzt und ergänzt auf/um auf die deutschsprachige Wikipedia zutreffende Fälle
	 */
	 
	/* 
	 * (1.1.1)
	 * Elementen mit Inline-Angabe von Hintergrundfarbe automatisch die dunkle
	 * Textfarbe des hellen Modus zuweisen, vgl. [[phab:T358385]] und [[phab:T358797]],
	 * aber nicht, wenn Hintergrundfarben per lokaler Klasse gesetzt werden, da diese
	 * selbst auf den Darkmode reagieren. Nicht !important, damit Inline-Farbangaben
	 * erhalten bleiben.
	 * Sonderfall table caption: Eine für die Tabelle vergebene Hintergrundfarbe wird nicht
	 * auf die Überschrift angewendet, die Textfarbe aber schon, weshalb die Korrektur
	 * der Textfarbe für Hintergrundfarben in diesem Fall rückgängig gemacht werden muss.
	 */
	html.skin-theme-clientpref-night .mw-parser-output :is([bgcolor], [style*="background"]):not([class*="hintergrundfarbe"]) {
		color: #202122;
	}
	html.skin-theme-clientpref-night .mw-parser-output table:is([bgcolor], [style*="background"], [class*="hintergrundfarbe"]) caption:not(:is([bgcolor], [style*="background"], [class*="hintergrundfarbe"])) {
		color: var(--color-base);
	}
	
	/* 
	 * (1.1.2)
	 * Text- und Hintergrundfarbe von Infoboxen korrigieren:
	 * zuerst globale Farben für das Infobox-Element setzen, danach
	 * die Farben auf die Kindelemente vererben, wenn nicht deaktiviert.
	 */
	html.skin-theme-clientpref-night .infobox:not(.notheme) {
		background-color: var(--background-color-interactive-subtle) !important;
		border-color: var(--border-color-subtle) !important;
		color: var(--color-base) !important;
	}
	html.skin-theme-clientpref-night .infobox:not(.notheme) :is(th, td, p, caption):not(.notheme),
	html.skin-theme-clientpref-night .infobox:not(.notheme) > div:not(.notheme) {
		background-color: inherit !important;
		color: inherit !important;
	}
	
	/* 
	 * == (1.2) ERGÄNZUNGEN FÜR VORHANDENE KLASSEN ==
	 * Darkmode-spezifische Ergänzungen für bereits in der deutschsprachigen Wikipedia verfügbare CSS-Klassen
	 */
	 
	/*
	 * (1.2.1)
	 * Ergänzung für Zebra-Tabellen: Farben auch für Zeilen mit ungeradem Index färben, spezifische Farbzuweisungen
	 * für einzelne Zeilen sowie per Standard-Hintergrundfarbe eingefärbte Zellen bleiben erhalten.
	 */
	html.skin-theme-clientpref-night table.wikitable.zebra:not(.notheme) > tbody > :nth-child(odd):not([class*="hintergrundfarbe"]) {
		background-color: var(--dewiki-hintergrundfarbe1);
		color: var(--color-base);
	}

	/* 
	 * == (1.3) NUR IM DARKMODE VERFÜGBARE KLASSEN ==
	 * Definition von nur im Darkmode verfügbaren und anzuwendenden CSS-Klassen
	 */

	/*
	 * (1.3.1)
	 * Hintergrundfarbe nur im Darkmode mit den Farben der Standardklassen überschreiben.
	 * Nur sinnvoll für Klassen, die auf den Darkmode reagieren; dann auch Textfarbe setzen.
	 * Wenn innerhalb von .notheme, nichts anpassen (Darkmode deaktiviert).
	 */
	html.skin-theme-clientpref-night .darkmode-hintergrundfarbe-basis:not(.notheme .darkmode-hintergrundfarbe-basis) {
		background-color: var(--dewiki-hintergrundfarbe-basis) !important;
		color: var(--color-base) !important;
	}
	html.skin-theme-clientpref-night .darkmode-hintergrundfarbe-passiv:not(.notheme .darkmode-hintergrundfarbe-passiv) {
		background-color: var(--dewiki-hintergrundfarbe1) !important;
		color: var(--color-base) !important;
	}
	html.skin-theme-clientpref-night .darkmode-hintergrundfarbe-neutral:not(.notheme .darkmode-hintergrundfarbe-neutral) {
		background-color: var(--dewiki-hintergrundfarbe5) !important;
		color: var(--color-base) !important;
	}
	
	/*
	 * (1.3.2)
	 * Elemente im Darkmode ein-/ausblenden.
	 * Insbesondere gedacht für Grafiken, die per skin-invert-image nicht sinnvoll
	 * invertierbar sind, aber über eine für den Darkmode geeignete Alternativversion verfügen.
	 * Inhalte sollten damit nicht verborgen werden.
	 */
	html.skin-theme-clientpref-night .darkmode-hide {
		display: none !important;
	}
	html.skin-theme-clientpref-night .darkmode-only {
		display: revert !important;
	}
}

/*
 * (2)
 * VOM BROWSER/OS ANGEFORDERTER DARKMODE
 * Klasse skin-theme-clientpref-os im HTML-Tag gesetzt
 * Die Definitionen aus (1) wiederholen sich hier.
 */
@media screen and (prefers-color-scheme: dark) {

	/* 
	 * == (2.1) ÜBERSCHREIBUNGEN FÜR DEN GESAMTEN INHALTSBEREICH ==
	 */
	 
	/* 
	 * (2.1.1)
	 */
	html.skin-theme-clientpref-os .mw-parser-output :is([bgcolor], [style*="background"]):not([class*="hintergrundfarbe"]) {
		color: #202122;
	}
	html.skin-theme-clientpref-os .mw-parser-output table:is([bgcolor], [style*="background"], [class*="hintergrundfarbe"]) caption:not(:is([bgcolor], [style*="background"], [class*="hintergrundfarbe"])) {
		color: var(--color-base);
	}
	
	/* 
	 * (2.1.2)
	 */
	html.skin-theme-clientpref-os .infobox:not(.notheme) {
		background-color: var(--background-color-interactive-subtle) !important;
		border-color: var(--border-color-subtle) !important;
		color: var(--color-base) !important;
	}
	html.skin-theme-clientpref-os .infobox:not(.notheme) :is(th, td, p, caption):not(.notheme),
	html.skin-theme-clientpref-os .infobox:not(.notheme) > div:not(.notheme) {
		background-color: inherit !important;
		color: inherit !important;
	}

	/* 
	 * == (2.2) ERGÄNZUNGEN FÜR VORHANDENE KLASSEN ==
	 */
	 
	/*
	 * (2.2.1)
	 */
	html.skin-theme-clientpref-os table.wikitable.zebra:not(.notheme) > tbody > :nth-child(odd):not([class*="hintergrundfarbe"]) {
		background-color: var(--dewiki-hintergrundfarbe1);
		color: var(--color-base);
	}
	
	/* 
	 * == (2.3) NUR IM DARKMODE VERFÜGBARE KLASSEN ==
	 */	
	
	/*
	 * (2.3.1)
	 */
	html.skin-theme-clientpref-os .darkmode-hintergrundfarbe-basis:not(.notheme .darkmode-hintergrundfarbe-basis) {
		background-color: var(--dewiki-hintergrundfarbe-basis) !important;
		color: var(--color-base) !important;
	}
	html.skin-theme-clientpref-os .darkmode-hintergrundfarbe-passiv:not(.notheme .darkmode-hintergrundfarbe-passiv) {
		background-color: var(--dewiki-hintergrundfarbe1) !important;
		color: var(--color-base) !important;
	}
	html.skin-theme-clientpref-os .darkmode-hintergrundfarbe-neutral:not(.notheme .darkmode-hintergrundfarbe-neutral) {
		background-color: var(--dewiki-hintergrundfarbe5) !important;
		color: var(--color-base) !important;
	}
	
	/*
	 * (2.3.2)
	 */
	html.skin-theme-clientpref-os .darkmode-hide {
		display: none !important;
	}
	html.skin-theme-clientpref-os .darkmode-only {
		display: revert !important;
	}
}

Änderungswünsche

Bitte auf MediaWiki/Änderungen vorschlagen.