Hallo Gunnar,
Man kann das Logo nicht mit CSS umfärben, wie es für den Darkmode nötig ist.
Wenn Safari @media (prefers-color-scheme: dark) in SVG-Elementen unterstützte, die als externe Resource geladen werden, dann wäre das alles kein Thema.
Allerdings lese ich gerade von einem Safari-Trick mit <object>, den ich aber mangels Safari nicht testen kann. Das wäre prima - für <img> Elemente. Für background-image: url(foo.svg)
leider immer noch nicht.
Im Wiki-Makeover verwende ich den Trick, SVG-Icons im Darkmode als url(foo.svg#dark) einzubinden und im SVG mit Hilfe von
<style>
:root {
--bgcolor: ...;
--color1: ...;
--color2: ...;
--color3: ...;
}
#dark:target {
--bgcolor: ...;
--color1: ...;
--color2: ...;
--color3: ...;
}
</style>
<g id="dark">
<!-- SVG Bild hier -->
</g>
die Farben umzuschalten. Im konkreten Fall natürlich mit konkreteren custom property Namen und je nach Bild mit transparentem Hintergrund.
Möglicherweise kann man – bei monochromen Logos – auch mit Blend-Modi etwas hexen, das habe ich noch nicht probiert.
Rolf
sumpsi - posui - obstruxi