Divs ohne Zwischenabstände

[Rolf B]

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