SVGs im Dunkelmodus

[Bimmelbeule]

Hallo (FrohsNeus)!

Habe auf meinem klugen Fernsprechapparat mal den Dunkelmodus akktiviert und muss mit Schrecken feststellen, das einige meiner SVGs auf meinen Webseiten falsch dargestellt werden. Bei dem Wappen (links) fehlen nur die schwarzen Umrandungen, während das SVG rechts komplett invertiert ist.

Ich meine ich hätte hier letztens einen Artikel gelesen über invertierte SVGs, finde ihn aber nicht mehr. Habe auch im Wiki nach SVG geschaut, aber fühle mich etwas überfordert.

Hier noch die beiden Original SVGs…

Kann mir jemand einen Wink geben, wie ich das Problem behoben bekomme?

Lg, Bimmelbeule

[Matthias Scharwies]

Servus!

Hallo (FrohsNeus)!

Habe auf meinem klugen Fernsprechapparat mal den Dunkelmodus akktiviert und muss mit Schrecken feststellen, das einige meiner SVGs auf meinen Webseiten falsch dargestellt werden. Bei dem Wappen (links) fehlen nur die schwarzen Umrandungen, während das SVG rechts komplett invertiert ist.

Kann mir jemand einen Wink geben, wie ich das Problem behoben bekomme?

In allen Browsern außer Safari, indem du prefers-color-scheme setzt, so wie bei HTML auch.

Der Safari ignoriert das aber leider.

Im Wiki haben wir das leider nur im Hilfe-Bereich thematisiert:

• Hilfe:Infografiken_in_SVG

@all Wo sollte man das denn hin tun?

Herzliche Grüße
Matthias Scharwies

[Tabellenkalk]

Hallo,

Bei dem Wappen (links) fehlen nur die schwarzen Umrandungen,

ne, auch das Fallgitter fehlt.
Ein Wappen zu invertieren, nur weil die Webseite auf dunkel umschaltet, halte ich für falsch.

Gruß
Kalk

[Rolf B]

Hallo Bimmelbeule,

mein Klugsprechi ist generell im Darkmode und zeigt Seiten, die das erkennen, dunkel an, bspw unser Wiki.

Deine Seite hingegen nicht. Sie werden hell dargestellt. Hast du keine generelle Darkmode-Weiche (prefers-color-scheme:dark) drin?

Rolf

[Gunnar Bittersmann]

@@Bimmelbeule

Habe auf meinem klugen Fernsprechapparat mal den Dunkelmodus akktiviert und muss mit Schrecken feststellen, das einige meiner SVGs auf meinen Webseiten falsch dargestellt werden. Bei dem Wappen (links) fehlen nur die schwarzen Umrandungen, während das SVG rechts komplett invertiert ist.

Das kann ich nicht nachvollziehen. Jedenfalls nicht mit den von dir gezeigten SVGs.

Darin sind die Farben für die schwarzen Striche auf #000 gesetzt. Wenn ich die SVGs in einen Codepen packe und :root { color-scheme: light dark } angebe, bleiben die schwarzen Striche im Darkmode auch erwartungsgemäß schwarz.^[1]

Warum das bei dir anders ist, entzieht sich unserer Kenntnis, wenn du deine Seite nicht verlinkst.

🖖 Live long and prosper

---

1. Von dem Sesselfurzer ist also (fast) nichts zu sehen: schwarz auf dunkelgrau. Hast du dir Gedanken gemacht, wie der im Darkmode denn überhaupt aussehen soll? ↩︎

[Rolf B]

Hallo Gunnar,

ich hab gar nicht gemerkt, dass das Forum SVGs attached. Ist das glücklich? Da könnten <image> Elemente mit externer Referenz drin sein.

Das kann ich nicht nachvollziehen. Jedenfalls nicht mit den von dir gezeigten SVGs.

Das liegt nicht an Dir, weil:

Habe auf meinem klugen Fernsprechapparat mal den Dunkelmodus aktiviert

Aber nicht auf die klügste Weise. Ich kann dein Problem nachvollziehen, wenn ich den Darkmode-Faker von Chrome aktiviere ("automatischer Dark-Mode"). Der macht dann aus schwarzen Linien weiße.

Stelle dein Handy auf ordentlichen Darkmode ein. Entweder für's ganze Handy in den Handy-Einstellungen, oder nur im Browser (sollte dort in den Einstellungen unter "Anzeige", "Darstellung" oder "Design" zu finden sein).

Damit deine Webseite dann dunkel wird, musst Du im Stylesheet über eine @media (prefers-color-scheme:dark) Abfrage die Farbeinstellungen für die Seite im Darkmode anpassen.

In den SVGs musst Du ebenfalls über ein <style> Element einfügen, mit einer @media-Abfrage und passenden Farbanpassungen. Das ist etwas Arbeit, aber wie Du siehst, ist der automagische Darkmode fehleranfällig.

SGVs mit Darkmode-Abfragen funktionieren im Safari leider nicht. Es gibt einen Workaround, für den liefere ich noch eine Beschreibung nach. Muss jetzt weg vom Gerät.

Rolf

[Bimmelbeule]

Hallo!

Erst mal Danke an alle die bisher geantwortet haben!

@RolfB:

mein Klugsprechi ist generell im Darkmode und zeigt Seiten, die das erkennen, dunkel an, bspw unser Wiki.

Deine Seite hingegen nicht. Sie werden hell dargestellt. Hast du keine generelle Darkmode-Weiche (prefers-color-scheme:dark) drin?

Nein, am liebsten möchte ich das sie überall hell dargestellt wird.

@Gunnar Bittersmann

Das kann ich nicht nachvollziehen. Jedenfalls nicht mit den von dir gezeigten SVGs.

Das geht bei mir sogar mit meinen SVGs direkt im Forum: Chromium -> Entwicklertools -> Entwicklertools anpassen und steuern -> Weitere Tools -> Rendering -> Automatischen dunklen Modus aktivieren.

Warum das bei dir anders ist, entzieht sich unserer Kenntnis, wenn du deine Seite nicht verlinkst.

www.h-felder.de (Sesselfurzer)
porz-am-rhein.h-felder.de (Wappen)

Von dem Sesselfurzer ist also (fast) nichts zu sehen: schwarz auf dunkelgrau.

Das wird ja immer kurioser… ツ

Hast du dir Gedanken gemacht, wie der im Darkmode denn überhaupt aussehen soll?

Eigentlich möchte ich, das die Seite einfach hell bleibt. Oder zumindest die SVGs so bleiben wie in der hellen Darstellung…

@RolfB:

Habe auf meinem klugen Fernsprechapparat mal den Dunkelmodus aktiviert

Aber nicht auf die klügste Weise.

??? ツ

Stelle dein Handy auf ordentlichen Darkmode ein.

Wie stelle ich denn den globalen Darkmode meines Handys »ordentlich« ein? Ich kann hier (Pixel 8a, Android 16 QPR2) nur Einstellungen -> Display -> »Dunkles Design« an oder ausschalten…

Entweder für's ganze Handy in den Handy-Einstellungen, oder nur im Browser (sollte dort in den Einstellungen unter "Anzeige", "Darstellung" oder "Design" zu finden sein).

Ja, ich kann das… aber können oder wollen das auch andere Nutzer eines Darkmods?

Damit deine Webseite dann dunkel wird, musst Du im Stylesheet über eine @media (prefers-color-scheme:dark) Abfrage die Farbeinstellungen für die Seite im Darkmode anpassen.

In den SVGs musst Du ebenfalls über ein <style> Element einfügen, mit einer @media-Abfrage und passenden Farbanpassungen. Das ist etwas Arbeit, aber wie Du siehst, ist der automagische Darkmode fehleranfällig.

Würde es denn nicht reichen, wenn ich nur in den SVGs die Anpassungen vornehme?

Lg, Bimmelbeule