Hallo Auge,

vielleicht hat er sich am „Mumpitz“ gestört - aber wir arbeiten hier im Forum schon Jahre zusammen und sowas nehme ich Leuten, deren Know-How ich respektiere, nicht übel.

Die fehlende Browserfunktion bedeuten für mich jetzt nicht, dass ich ein SVG baue, das nicht überall funktioniert. Es soll ja überall funktionieren, weshalb ich eben ein <rect> Element, dessen rx per CSS gesetzt wird, nicht verwenden darf. Mein Workaround sind die zwei Kreise.

Bezüglich der CSS Präprozessoren wie SASS/SCSS/LESS denke ich, dass die einen anderen Fokus haben. Sie werden sinnvollerweise serverseitig ausgeführt, bevor das CSS-Compilat ausgeliefert wird, und das bedeutet, dass sie nichts von den Umgebungseinstellungen der Besucher*innen wissen. Das geht nur mit @media oder implizit mit der light-dark()-Funktion. Da diese beiden Abfragen vom Safari nicht in SVGs beachtet werden, habe ich das CSS des Wiki so geändert, dass das SVG mit einem Hash aufgerufen wird: link_chain1.svg#dark. Im SVG gibt's ein g-Element mit id="dark" und wenn ich im SVG-Stylesheet #dark:target verwende, kann ich auf die Existenz dieses Hashmark testen und die Farbe von schwarz auf Selfgelb (oder gold) ändern.

Hinzufügen von #dark geschieht durch eine @media-Query im Wiki-Stylesheet.

Das ist im Wiki in /skins/Makeover/content-screen.css und /skins/Makeover/images/link_chain1.svg zu sehen.

Der Makeover-Skin kann von jedem Besucher über die Wiki-Benutzereinstellungen (Aussehen) ausgewählt werden, ist aber noch im Prä-Beta Status. Also, angucken gerne, aber auf eigene Gefahr 😀. Im Gegensatz zum Selfhtml-Skin funktioniert dort der Darkmode (größtenteils). Nach Fertigstellung wird er über den aktuellen Selfhtml-Skin drüberkopiert, da muss also nicht jeder seine Einstellungen ändern.

Rolf