Transparente PNG- und GIF-Dateien im dark mode mit einem Hintergrund versehen

[Rolf B]

Hallo,

aaalso - ich habe beim Makeover-Skin ausdrücklich eine Regel für die Galerie eingefügt:

:root {
    /* Auszug aus dem Skin-CSS */
    --blue-dark3: hsl(201 50% 7%);
    --blue1: hsl(201 50% 60%);
    --grey4: hsl(26 22% 95%);
    --bgdarker: light-dark(var(--grey4),var(--blue-dark3));

    --prefs-bg: light-dark(#f9f9f9,var(--bgdarker));
    --prefs-border: light-dark(#cccccc,var(--blue1));
}

li.gallerybox div.thumb {
    border: 1px solid var(--prefs-border);
    background-color: var(--prefs-bg);
}

D.h. ich verwende die Rahmen- und Hintergrundfarbe, die auch der Einstellungen-Dialog nutzt.

Die Farbpalette an sich ist so eine Sache. Einerseits möchte Matthias die Farbpalette vorgeben, andererseits fehlen dort Pastellabstufungen, um das Look-And-Feel des Wiki beizubehalten. Die Farben #f9f9f9 und #cccccc sind aus Vector übernommen, dafür hab ich noch keine Selfhtml-Entsprechung eingesetzt. #f9f9f9 ist heller als das aktuelle --grey4, #cccccc liegt zwischen --grey2 und --grey3.

Dass es bei transparenten Bildern für das Mediawiki-Element <gallery> nicht passt, einfach dunklen Hintergrund einzusetzen, sehe ich ein. Das kann man ändern - aber wehe, man setzt in diese Galerie dann ein SVG ein, das auf Darkmode reagiert. Wie zum Beispiel die Neuinterpretation des Netz-Logos.

Die Frage ist auch, ob man eine Methode braucht, um für Pixelbilder eine Darkmode-Version bereitzustellen. Im JavaScript weiß ich nicht, ob sowas existiert. Bei Einzelbildern könnte man wieder mit class operieren. In der <gallery> gibt es allerdings keine Möglichkeit, einzelnen Bildern eine Merkmal für die Darstellungsart zuzuordnen. Und ich möchte eigentlich auch nicht die Gallery-Extension auseinandernehmen, um zu schauen, ob sie Hooks anbietet. Das einzige, was geht, ist <gallery class="light"> - das setzt die Klasse light auf dem ul Element, das Mediawiki aus <gallery> macht. Das kann ich nutzen, um die Galerie generell mit hellem Hintergrund zu versehen.

Bei Einzelbildern, die irgendwo im Wikitext als [[Datei:xyz.png|...]] eingebunden werden, kann eine Klasse gesetzt werden. Hier ist class=light bereits vorgesehen. Würde man class=light-dark zuordnen, könnte der SVG-Replacer mithelfen und das img Element durch ein picture-Element ersetzen, worin per source Medienabfragen auf light- und darkmode abgefragt wird. Die Darkmode-Version des Bildes muss dann per Namenskonvention gefunden werden (also beispielsweise foo.png und foo-dark.png).

Ich tue mich gerade schwer damit, eine Anforderungsliste "Bilddarstellung" zusammen zu bekommen. Mit Einzelbildern und Galeriebildern, mit intransparenten Pixelbildern, mit transparenzhaltigen Pixelbildern, mit SVGs, die auf Darkmode reagieren oder auch nicht, je nach SVG und je nach Browser.

Rolf