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: [](/images/c13fd932-4a93-11f0-a6be-9c6b003e9157.png) 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: [](/images/55327a50-4a94-11f0-8fee-9c6b003e9157.png) 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](https://wiki.selfhtml.org/wiki/Hilfe:Infografiken_in_SVG) ## Bsp. 1 prefers-color-scheme [Datei:Gruppenwechsel_Bahnreisender_Fahrplan.svg](https://wiki.selfhtml.org/wiki/Datei:Gruppenwechsel_Bahnreisender_Fahrplan.svg) Standard ist Light Mode (Schwarze Schrift auf weißem Grund), dann eine media query: ~~~ CSS 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: [](/images/47273c52-4aa8-11f0-8906-9c6b003e9157.png) ## Bsp. 2 Blau geht immer! Unser SELF-Blau `steelBlue`/ `#337599` passt zu allem: ~~~ CSS #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. [](/images/d4e6ad32-4aaa-11f0-9f91-9c6b003e9157.png) @Bertie - vielen Dank für die SVGs. # Vorgehensweise Ich bin gestern durch [Spezial:Nicht_kategorisierte_Dateien](https://wiki.selfhtml.org/wiki/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 -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)

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: [](/images/c13fd932-4a93-11f0-a6be-9c6b003e9157.png) 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: [](/images/55327a50-4a94-11f0-8fee-9c6b003e9157.png) 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](https://wiki.selfhtml.org/wiki/Hilfe:Infografiken_in_SVG) ## Bsp. 1 prefers-color-scheme [Datei:Gruppenwechsel_Bahnreisender_Fahrplan.svg](https://wiki.selfhtml.org/wiki/Datei:Gruppenwechsel_Bahnreisender_Fahrplan.svg) Standard ist Light Mode (Schwarze Schrift auf weißem Grund), dann eine media query: ~~~ CSS 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 dank weißem Hintergrund lesbar - in anderen Browsern wird umgeschaltet: [](/images/47273c52-4aa8-11f0-8906-9c6b003e9157.png) ## Bsp. 2 Blau geht immer! Unser SELF-Blau `steelBlue`/ `#337599` passt zu allem: ~~~ CSS #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. [](/images/d4e6ad32-4aaa-11f0-9f91-9c6b003e9157.png) @Bertie - vielen Dank für die SVGs. # Vorgehensweise Ich bin gestern durch [Spezial:Nicht_kategorisierte_Dateien](https://wiki.selfhtml.org/wiki/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 -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)