Un contatore che segue la pagina nel tema scuro

Un contatore è un'immagine sulla pagina di qualcun altro. Quando quella pagina ha un tema scuro, l'immagine non lo sa: è stata disegnata sul server, molto prima che la preferenza di sistema del visitatore fosse un fatto. Un distintivo bianco su una pagina scura è il risultato consueto, e sembra un buco.

Quindici dei design qui presenti se la cavano lo stesso. Senza interrogare la pagina e senza JavaScript — non ce n'è alcuno coinvolto. L'immagine commuta da sé.

Come

SVG non è un'immagine, è un documento, e un documento può portare un foglio di stile. Il server disegna quindi il design due volte, chiaro e scuro, mette entrambi in un unico file e aggiunge tre righe di CSS:

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

Il browser applica quella media query dentro l'immagine, anche quando l'immagine viene caricata con un semplice tag <img> da un altro dominio. Metti il sistema su scuro e il contatore segue — senza ricaricare, senza che la pagina attorno c'entri in alcun modo.

Quanto costa

Entrambe le versioni stanno nel file, quindi il file è circa il doppio. Misurato su un design: 1.029 byte normalmente, 2.041 con il gemello scuro. Questo è il prezzo onesto e il motivo per cui non è l'impostazione predefinita: si chiede per inserimento invece di imporlo a tutti.

Non c'è una seconda richiesta né un secondo giro. Arriva un file, e la metà che non serve non viene mai dipinta.

La trappola nel mezzo

Sfumature, filtri e maschere in SVG si richiamano tramite id. Entrambe le versioni di un design nascono dallo stesso codice, quindi entrambe portano sfumature chiamate g1, g2 e così via. Mettile tutte e due in un documento e la seconda definizione di un id semplicemente non vale — la versione scura si disegna in silenzio con i colori di quella chiara.

Niente segnala un errore. Il file è valido. Ha solo un aspetto sbagliato, in un modo che è facile addossare al design invece che al montaggio.

Prima che le due metà si uniscano, ogni id della versione scura viene quindi rinominato con un prefisso, e ogni url(#...) che vi punta viene riscritto di conseguenza. È un passo piccolo e saltarlo produce un difetto che un'occhiata rapida non riesce a spiegare.

Quando si rifiuta

Se manca una delle metà, se una non produce un elemento <svg>, o se le due escono identiche byte per byte — il che significa che il design non ha una variante scura — viene restituita la versione chiara intatta. Un SVG montato a metà sarebbe peggio di nessun tema scuro, e un contatore che si disegna vale più di uno che è astuto.