Un contador que sigue a la página al modo oscuro
Un contador es una imagen en la página de otra persona. Cuando esa página tiene modo oscuro, la imagen no lo sabe: se dibujó en el servidor, mucho antes de que la preferencia del sistema del visitante fuera siquiera un hecho. Una insignia blanca sobre una página oscura es el resultado habitual, y parece un agujero.
Quince de los diseños de aquí se las arreglan igualmente. Sin preguntar a la página y sin JavaScript — no interviene ninguno. La imagen conmuta sola.
Cómo
SVG no es una imagen, es un documento, y un documento puede llevar una hoja de estilos. Así que el servidor dibuja el diseño dos veces, claro y oscuro, mete ambos en un archivo y añade tres líneas de CSS:
.s4uD{display:none} @media(prefers-color-scheme:dark){.s4uL{display:none}.s4uD{display:inline}}
El navegador aplica esa consulta de medios dentro de la imagen, incluso cuando la imagen se carga mediante una simple etiqueta <img> desde otro dominio. Pon tu sistema en oscuro y el contador te sigue — sin recargar, sin que la página de alrededor intervenga en absoluto.
Lo que cuesta
Ambas versiones están en el archivo, así que el archivo mide más o menos el doble. Medido en un diseño: 1.029 bytes normalmente, 2.041 con el gemelo oscuro. Ese es el precio honesto y la razón de que no sea la opción por defecto: se pide por inserción en lugar de imponerse a todos.
No hay una segunda petición ni un segundo viaje. Llega un archivo, y la mitad que no hace falta no se pinta nunca.
La trampa que hay en medio
Los degradados, filtros y máscaras se referencian en SVG por id. Ambas versiones de un diseño las genera el mismo código, así que ambas traen degradados llamados g1, g2 y demás. Mete las dos en un documento y la segunda definición de un id sencillamente no se aplica — la versión oscura se dibuja en silencio con los colores de la clara.
Nada da error. El archivo es válido. Solo se ve mal, de una manera que resulta fácil achacar al diseño en vez de al montaje.
Por eso, antes de unir las dos mitades, cada id de la versión oscura se renombra con un prefijo, y cada url(#...) que apunta a uno se reescribe en consecuencia. Es un paso pequeño y saltárselo produce un fallo que un vistazo rápido no puede explicar.
Cuándo se niega
Si falta una de las mitades, si alguna no produce un elemento <svg>, o si ambas salen idénticas byte a byte — lo que significa que el diseño no tiene variante oscura — se devuelve la versión clara sin tocar. Un SVG medio montado sería peor que ningún modo oscuro, y un contador que se dibuja vale más que uno que es listo.