Wikipedia:Technik/Skin/Gadgets/dewikiDarkmode

Profil

CSS

/* 
 * (1) 
 * VOM BENUTZER EXPLIZIT GESETZTER DARKMODE
 * Klasse skin-theme-clientpref-night im HTML-Tag gesetzt
 * Immer auch die korrespondierende Regel in (2) anpassen!
 */
@mediascreen{

/* 
	 * == (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(.darkmode-standardcolors,[class*="hintergrundfarbe"]){
color:#202122;
}
html.skin-theme-clientpref-night.mw-parser-outputtable: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.
	 * Tabellenkopfzellen erhalten eine leicht abgesetzte Farbgebung.
	 */
html.skin-theme-clientpref-night.infobox:not(.notheme,.darkmode-standardcolors){
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,.darkmode-standardcolors):is(td,p,caption):not(.notheme,.darkmode-standardcolors),
html.skin-theme-clientpref-night.infobox:not(.notheme,.darkmode-standardcolors)>div:not(.notheme,.darkmode-standardcolors){
background-color:inherit!important;
color:inherit!important;
}
html.skin-theme-clientpref-night.infobox:not(.notheme,.darkmode-standardcolors)th:not(.notheme,.darkmode-standardcolors){
background-color:var(--dewiki-hintergrundfarbe5)!important;
color:var(--color-base)!important;
}

/* 
	 * (1.1.3)
	 * Farbe von Wikilinks anpassen, wenn sie im Darkmode vor hellem Hintergrund genutzt werden.
	 * Die aufgehellte Linkfarbe des Darkmode ist in diesen Fällen zu hell und sorgt für zu
	 * geringen Kontrast.
	 * Diese Farbkorrektur ist nicht 100%ig genau, weil mehrfache Verschachtelung möglich ist und
	 * diese nicht immer abgefangen werden kann.
	 */
/* I. auslösendes Element mit definierter Hintergrundfarbe oder Farbklasse, das nicht selbst Definitionen besitzt, die auf den Darkmode reagieren und die Hintergrundfarbe überschreiben */
html.skin-theme-clientpref-nightbody:not(.ns-100).mw-parser-output
:is([style*="background"],[bgcolor],[class*="hintergrundfarbe"]):not(:is(.notheme,.darkmode-standardlinks.infobox,.zebra,[style*="var("],[class*="hintergrundfarbe-basis"],[class*="hintergrundfarbe1"],[class*="hintergrundfarbe5"],[class*="darkmode-hintergrundfarbe"]))
/* Link im Dokumentenbaum und Negierungen für Linkkontext */
a:not(
/* I.a Link innerhalb top-level auf Darkmode reagierender Elemente */
:is(.notheme,.darkmode-standardlinks,.infobox,[style*="var("])a,
/* I.b Link innerhalb auslösender Elemente, die später durch auf Darkmode reagierende Elemente überschrieben werden */
:is([style*="background"],[bgcolor],[class*="hintergrundfarbe"]):is(.notheme,.darkmode-standardlinks,.infobox,.zebra,.wikitable,.toccolours,[style*="var("],[class*="hintergrundfarbe-basis"],[class*="hintergrundfarbe1"],[class*="hintergrundfarbe5"],[class*="darkmode-hintergrundfarbe"])a,
/* I.c Link innerhalb Wikitable-Tabellenkopfzellen ohne überschreibende Farbzuweisung in der Zeilendefinition */
.wikitabletr:not([class*="hintergrundfarbe"])tha
),
/* II. auslösendes Element mit definierter Hintergrundfarbe oder Farbklasse, das nicht selbst Definitionen besitzt, die auf den Darkmode reagieren und die Hintergrundfarbe überschreiben */
html.skin-theme-clientpref-nightbody:not(.ns-100).mw-parser-output
:is([style*="background"],[bgcolor],[class*="hintergrundfarbe"]):not(:is(.notheme,.darkmode-standardlinks,.infobox,.zebra,[style*="var("],[class*="hintergrundfarbe-basis"],[class*="hintergrundfarbe1"],[class*="hintergrundfarbe5"],[class*="darkmode-hintergrundfarbe"]))
/* Link als direktes Kindelement und Negierungen für Linkkontext */
>a:not(
/* II.a Link innerhalb top-level auf Darkmode reagierender Elemente */
:is(.notheme,.darkmode-standardlinks,.infobox,[style*="var("])a
)
{
--color-progressive:#0000fa;
--color-progressive--hover:#000088;
--color-visited:#5050fa;
--color-visited--hover:#505088;
}
/* 
	 * == (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-nighttable.wikitable.zebra:not(.notheme)>tbody>:nth-child(odd):not([style*="background"],[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.
 */
@mediascreenand(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(.darkmode-standardcolors,[class*="hintergrundfarbe"]){
color:#202122;
}
html.skin-theme-clientpref-os.mw-parser-outputtable: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,.darkmode-standardcolors){
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,.darkmode-standardcolors):is(td,p,caption):not(.notheme,.darkmode-standardcolors),
html.skin-theme-clientpref-os.infobox:not(.notheme,.darkmode-standardcolors)>div:not(.notheme,.darkmode-standardcolors){
background-color:inherit!important;
color:inherit!important;
}
html.skin-theme-clientpref-os.infobox:not(.notheme,.darkmode-standardcolors)th:not(.notheme,.darkmode-standardcolors){
background-color:var(--dewiki-hintergrundfarbe5)!important;
color:var(--color-base)!important;
}

/* 
	 * (2.1.3)
	 */
html.skin-theme-clientpref-osbody:not(.ns-100).mw-parser-output
:is([style*="background"],[bgcolor],[class*="hintergrundfarbe"]):not(:is(.notheme,.darkmode-standardlinks.infobox,.zebra,[style*="var("],[class*="hintergrundfarbe-basis"],[class*="hintergrundfarbe1"],[class*="hintergrundfarbe5"],[class*="darkmode-hintergrundfarbe"]))
a:not(
:is(.notheme,.darkmode-standardlinks,.infobox,[style*="var("])a,
:is([style*="background"],[bgcolor],[class*="hintergrundfarbe"]):is(.notheme,.darkmode-standardlinks,.infobox,.zebra,.wikitable,.toccolours,[style*="var("],[class*="hintergrundfarbe-basis"],[class*="hintergrundfarbe1"],[class*="hintergrundfarbe5"],[class*="darkmode-hintergrundfarbe"])a,
.wikitabletr:not([class*="hintergrundfarbe"])tha
),
html.skin-theme-clientpref-osbody:not(.ns-100).mw-parser-output
:is([style*="background"],[bgcolor],[class*="hintergrundfarbe"]):not(:is(.notheme,.darkmode-standardlinks,.infobox,.zebra,[style*="var("],[class*="hintergrundfarbe-basis"],[class*="hintergrundfarbe1"],[class*="hintergrundfarbe5"],[class*="darkmode-hintergrundfarbe"]))
>a:not(
:is(.notheme,.darkmode-standardlinks,.infobox,[style*="var("])a
)
{
--color-progressive:#0000fa;
--color-progressive--hover:#000088;
--color-visited:#5050fa;
--color-visited--hover:#505088;
}

/* 
	 * == (2.2) ERGÄNZUNGEN FÜR VORHANDENE KLASSEN ==
	 */

/*
	 * (2.2.1)
	 */
html.skin-theme-clientpref-ostable.wikitable.zebra:not(.notheme)>tbody>:nth-child(odd):not([style*="background"],[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