Helmstedt-Wiki:Technik/Skin/Gadgets/dewikiDarkmode

Einheitliche Überschrift für Technik -Projektseiten.

Parameter

Text: Überschrift
Shortcut: optional; für Gadgets
Logo: optional; Datei-Titel
LogoPixel: optional; Logo-Größe in Pixeln, Vorgabe: 40

Das Gadget dewikiDarkmode ist nicht für Benutzerkonten konfigurierbar.

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

Profil

{{#invoke:MediaWikiGadgetDefinition|f|SCOPE=site|TEMPLATE=1|IGNORE=Überschrift|Überschriftsstufe}}

CSS

<syntaxhighlight lang="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. * Tabellenkopfzellen erhalten eine leicht abgesetzte Farbgebung. */ 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(td, p, caption):not(.notheme), html.skin-theme-clientpref-night .infobox:not(.notheme) > div:not(.notheme) { background-color: inherit !important; color: inherit !important; } html.skin-theme-clientpref-night .infobox:not(.notheme) th:not(.notheme) { background-color: var(--dewiki-hintergrundfarbe5) !important; color: var(--color-base) !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([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([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(td, p, caption):not(.notheme), html.skin-theme-clientpref-os .infobox:not(.notheme) > div:not(.notheme) { background-color: inherit !important; color: inherit !important; } html.skin-theme-clientpref-os .infobox:not(.notheme) th:not(.notheme) { background-color: var(--dewiki-hintergrundfarbe5) !important; color: var(--color-base) !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([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; } }</syntaxhighlight>