Ein Zähler, der der Seite in den Dunkelmodus folgt

Ein Zähler ist ein Bild auf der Seite von jemand anderem. Hat diese Seite einen Dunkelmodus, weiß das Bild davon nichts: es wurde auf dem Server gezeichnet, lange bevor die Systemeinstellung des Besuchers überhaupt eine Tatsache war. Ein weißes Abzeichen auf dunkler Seite ist das übliche Ergebnis, und es sieht aus wie ein Loch.

Fünfzehn der Entwürfe hier kommen trotzdem damit zurecht. Nicht indem sie die Seite fragen, und nicht mit JavaScript — davon ist keines beteiligt. Das Bild schaltet von selbst um.

Wie

SVG ist kein Bild, sondern ein Dokument, und ein Dokument kann ein Stilblatt tragen. Der Server zeichnet den Entwurf also zweimal, hell und dunkel, legt beides in eine Datei und fügt drei Zeilen CSS hinzu:

.s4uD{display:none} @media(prefers-color-scheme:dark){.s4uL{display:none}.s4uD{display:inline}}

Der Browser wendet diese Medienabfrage innerhalb des Bildes an, auch wenn das Bild über ein schlichtes <img>-Element von einer anderen Domain geladen wird. Stell dein System auf dunkel, und der Zähler folgt — ohne Neuladen, ohne dass die Seite drumherum überhaupt beteiligt wäre.

Was es kostet

Beide Fassungen stecken in der Datei, sie ist also etwa doppelt so groß. An einem Entwurf gemessen: 1.029 Byte normal, 2.041 mit dem dunklen Zwilling. Das ist der ehrliche Preis und der Grund, warum es nicht die Voreinstellung ist: es wird je Einbindung angefordert statt allen aufgezwungen.

Es gibt keine zweite Anfrage und keinen zweiten Umlauf. Eine Datei kommt an, und die Hälfte, die nicht gebraucht wird, wird nie gezeichnet.

Die Falle mittendrin

Verläufe, Filter und Masken werden in SVG über eine id angesprochen. Beide Fassungen eines Entwurfs entstehen aus demselben Code, also bringen beide Verläufe namens g1, g2 und so weiter mit. Legt man beide in ein Dokument, gilt die zweite Definition einer id einfach nicht — die dunkle Fassung zeichnet dann lautlos in den Farben der hellen.

Nichts meldet einen Fehler. Die Datei ist gültig. Sie sieht nur falsch aus, auf eine Weise, die man leicht dem Entwurf anlastet statt dem Zusammenbau.

Bevor die zwei Hälften zusammenkommen, wird deshalb jede id der dunklen Fassung mit einem Präfix umbenannt, und jedes url(#...), das darauf zeigt, wird mitgezogen. Ein kleiner Schritt, und ihn zu überspringen erzeugt einen Fehler, den ein kurzer Blick nicht erklären kann.

Wann es sich verweigert

Fehlt eine der Hälften, liefert eine kein <svg>-Element, oder kommen beide Byte für Byte gleich heraus — was heißt, der Entwurf kennt keinen dunklen Modus —, dann kommt die helle Fassung unverändert zurück. Ein halb zusammengebautes SVG wäre schlimmer als gar kein Dunkelmodus, und ein Zähler, der zeichnet, ist mehr wert als einer, der clever ist.