Beispiel zur Notiz „SVG mit CSS gestalten“

Dark Mode in einer SVG-Datei

Alle drei Bilder sind dieselbe SVG-Datei mit eigenem @media (prefers-color-scheme: dark). Welcher Fall greift, hängt in Chrome 155 von color-scheme am <img> ab: light ergibt Schwarz, dark ergibt Weiß, light dark folgt dem Systemdesign.

Ob Firefox und Safari das genauso machen, ist nicht geprüft.

Getestet in Chrome 155. Browserstand und Einordnung: siehe Notiz.

color-scheme: light
color-scheme: dark
color-scheme: light dark

Systemdesign laut Browser: