CowboysWiki:Technik/Skin/Gadgets/dewikiDarkmode
Zur Navigation springen
Zur Suche springen
dewikiDarkmode
Das Gadget dewikiDarkmode ist nicht für Benutzerkonten konfigurierbar.
Es bewirkt Anpassungen und Klassendefinitionen für den Dunkelmodus („Dark Mode“).
Profil
Lua-Fehler in Modul:MediaWikiGadgetDefinition, Zeile 462: attempt to index field 'data' (a nil value)
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(.darkmode-standardcolors, [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.
* 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-night body: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 */
.wikitable tr:not([class*="hintergrundfarbe"]) th a
),
/* 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-night body: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-night table.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.
*/
@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(.darkmode-standardcolors, [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, .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-os body: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,
.wikitable tr:not([class*="hintergrundfarbe"]) th a
),
html.skin-theme-clientpref-os body: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-os table.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
Bitte auf MediaWiki/Änderungen vorschlagen.