Mahlzeit!

Irgendwie drehen wir uns seit 4 Wochen im Kreis. Deshalb möchte ich jetzt festlegen, wie wir mit Bildern im Wiki umgehen.

Wir haben das Makeover geschafft, zu dem auch ein Dark Mode gehört. Vielen Dank an @Rolf B . Es gab zahlreiche Anpassungen, so hatten Tabellen, aber auch thumbnails einen hellgrauen Hintergrund, der mit weißer Schriftfarbe nicht harmonierte.

Ziel des Dark Mode ist imho aber, das Teiltransparenzen den Hintergrund durchscheinen lassen, so wie hier:

Links ist das Bild normal verlinkt ([[Datei:Beispiel.svg]])
rechts mit Thumbnail und thumbcaption: ([[Datei:Beispiel.svg|thumb|Grundformen in SVG]])

Der weiße Hintergrund war ein Bug, den ich auch gemeldet hatte. Umso erstaunter war ich, dass er heute als Feature eingebaut wurde:

Ich habe das in der der Mediawiki:Selfhtml.css korrigiert, damit die thumbcaption im Darkmode sichtbar ist und damit teiltransparente Grafiken den passenden Hintergrund durchscheinen lassen.

Wie kriegt man aber im Safari, der kein prefers-color-scheme beachtet, die passende Textfarbe hin?

Nur im Bild!

Hier habe ich die Ergebnisse unserer Versuche zusammengefasst:

Hilfe:Infografiken in SVG

Bsp. 1 prefers-color-scheme

Datei:Gruppenwechsel_Bahnreisender_Fahrplan.svg

Standard ist Light Mode (Schwarze Schrift auf weißem Grund), dann eine media query:

      svg {
        background-color: white;
      }
      text {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 28px;
				fill: #333;
      }
      #Kreise {
        fill: #fff;
        stroke: #c82f04;
        stroke-width: 4;
      }

@media (prefers-color-scheme:dark) {
    svg {
        background-color: #112632;
    }

    text {
        fill: white;
    }
	
    circle {
        fill: pink;
    }
}

Ergebnis: auf dem iPhone ist die Schrift auch im Dark Mode dank weißem Hintergrund lesbar - in anderen Browsern wird umgeschaltet:

Bsp. 2 Blau geht immer!

Unser SELF-Blau steelBlue/ #337599 passt zu allem:

 #Zahlen {
		fill:white;
 }
#Kreise {
        fill: SteelBlue;
  }
#Kreise, #Verbindungen {
        stroke: steelBlue;
}

 @media (prefers-color-scheme:dark) {
 #Kreise {
          fill: #112632;
        }
 }

Hier gibt es keinen Hintergrund und die Schriftfarbe ändert sich nicht.
Das einzige was hier umschaltet, ist das fill für die Kreise.

@Bertie - vielen Dank für die SVGs.

Vorgehensweise

Ich bin gestern durch Spezial:Nicht_kategorisierte_Dateien und habe nicht benutzte Dateien, Dubletten und anderes gelöscht.

Übrig bleiben einige ToDos, von denen Bertie die meisten schon vektorisiert hat! Vielen Dank!

Jetzt müssen wir halt durch die Infografiken durch und schauen, wo sich dunkler Text auf dunklem Hintergrund befindet - ganz schön tricky, wenn man den gar nicht sieht.

Herzliche Grüße
Matthias Scharwies