Tellers die de donkere modus volgen

Een teller is een afbeelding op andermans pagina. Heeft die pagina een donkere modus, dan weet de afbeelding dat niet: ze is op de server getekend, lang voordat de systeemvoorkeur van de bezoeker als feit bestond. Een wit insigne op een donkere pagina is de gebruikelijke uitkomst, en het ziet eruit als een gat.

Vijftien van de ontwerpen hier kunnen er toch mee omgaan. Niet door het aan de pagina te vragen, en niet met JavaScript — daar komt er geen aan te pas. De afbeelding schakelt zelf om.

Hoe

SVG is geen plaatje, het is een document, en een document kan een stijlblad meedragen. De server tekent het ontwerp dus twee keer, licht en donker, zet allebei in één bestand, en voegt drie regels CSS toe:

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

De browser past die mediaquery binnen de afbeelding toe, ook wanneer de afbeelding via een gewone <img>-tag van een ander domein geladen wordt. Zet het systeem op donker en de teller volgt — zonder herladen, zonder dat de pagina eromheen er ook maar iets mee te maken heeft.

Wat het kost

Beide versies zitten in het bestand, dus het bestand is ongeveer twee keer zo groot. Aan één ontwerp gemeten: 1.029 bytes normaal, 2.041 met de donkere tweelingbroer. Dat is de eerlijke prijs en de reden dat het niet de standaard is: het wordt per insluiting gevraagd in plaats van iedereen opgelegd.

Er is geen tweede aanvraag en geen tweede heen-en-weer. Er komt één bestand aan, en de helft die niet nodig is, wordt nooit getekend.

De valstrik ertussen

Verlopen, filters en maskers in SVG worden op id aangesproken. Beide versies van een ontwerp worden door dezelfde code gemaakt, dus beide brengen verlopen mee die g1, g2 enzovoort heten. Zet ze allebei in één document en de tweede definitie van een id geldt eenvoudigweg niet — de donkere versie tekent geruisloos in de kleuren van de lichte.

Er komt geen fout. Het bestand is geldig. Het ziet er alleen verkeerd uit, op een manier die makkelijk aan het ontwerp geweten wordt in plaats van aan het samenvoegen.

Dus voordat de twee helften samengevoegd worden, krijgt elk id in de donkere versie een voorvoegsel, en elke url(#...) die ernaar wijst wordt meegeschreven. Het is een kleine stap en hem overslaan levert een fout op die met een vluchtige blik niet te verklaren is.

Wanneer hij weigert

Ontbreekt een van beide helften, levert een van beide geen <svg>-element op, of komen de twee er byte voor byte gelijk uit — wat betekent dat het ontwerp geen donkere variant heeft — dan wordt de lichte versie onveranderd teruggegeven. Een halve samengestelde SVG zou erger zijn dan helemaal geen donkere modus, en een teller die tekent is meer waard dan een teller die slim is.