Un compteur qui suit la page en mode sombre

Un compteur est une image sur la page de quelqu'un d'autre. Quand cette page a un mode sombre, l'image ne le sait pas : elle a été dessinée sur le serveur, bien avant que la préférence système du visiteur n'existe comme fait. Un badge blanc sur une page sombre est le résultat habituel, et cela ressemble à un trou.

Quinze des motifs proposés ici s'en sortent quand même. Sans interroger la page et sans JavaScript — il n'y en a aucun d'impliqué. L'image bascule d'elle-même.

Comment

SVG n'est pas une image, c'est un document, et un document peut porter une feuille de style. Le serveur dessine donc le motif deux fois, clair et sombre, met les deux dans un seul fichier et ajoute trois lignes de CSS :

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

Le navigateur applique cette requête média à l'intérieur de l'image, même lorsque l'image est chargée par une simple balise <img> depuis un autre domaine. Passez votre système en sombre et le compteur suit — sans rechargement, sans que la page autour n'y soit pour quoi que ce soit.

Ce que cela coûte

Les deux versions sont dans le fichier, il fait donc environ le double. Mesuré sur un motif : 1 029 octets normalement, 2 041 avec le jumeau sombre. C'est le prix honnête et la raison pour laquelle ce n'est pas le comportement par défaut : cela se demande à l'intégration au lieu d'être imposé à tous.

Il n'y a pas de seconde requête ni de second aller-retour. Un fichier arrive, et la moitié dont on n'a pas besoin n'est jamais peinte.

Le piège au milieu

Les dégradés, filtres et masques se référencent en SVG par un id. Les deux versions d'un motif sont produites par le même code, elles apportent donc toutes deux des dégradés nommés g1, g2, et ainsi de suite. Mettez les deux dans un même document et la seconde définition d'un id ne s'applique tout simplement pas — la version sombre se dessine silencieusement dans les couleurs de la claire.

Rien ne signale d'erreur. Le fichier est valide. Il a seulement l'air faux, d'une manière qu'on impute facilement au motif plutôt qu'à l'assemblage.

Avant de réunir les deux moitiés, chaque id de la version sombre est donc renommé avec un préfixe, et chaque url(#...) qui pointe dessus est réécrit en conséquence. C'est une petite étape, et la sauter produit un défaut qu'un coup d'œil rapide ne peut pas expliquer.

Quand il refuse

S'il manque une moitié, si l'une ne produit pas d'élément <svg>, ou si les deux sortent identiques octet pour octet — ce qui veut dire que le motif n'a pas de variante sombre — la version claire est renvoyée telle quelle. Un SVG à moitié assemblé serait pire que pas de mode sombre du tout, et un compteur qui se dessine vaut mieux qu'un compteur malin.