Um contador que segue a página para o modo escuro

Um contador é uma imagem na página de outra pessoa. Quando essa página tem modo escuro, a imagem não sabe: foi desenhada no servidor, muito antes de a preferência de sistema do visitante ser sequer um facto. Um emblema branco sobre uma página escura é o resultado habitual, e parece um buraco.

Quinze dos modelos daqui aguentam-se na mesma. Sem perguntar à página e sem JavaScript — não há nenhum envolvido. A imagem comuta sozinha.

Como

SVG não é uma imagem, é um documento, e um documento pode levar uma folha de estilos. O servidor desenha então o modelo duas vezes, claro e escuro, mete os dois num só ficheiro e acrescenta três linhas de CSS:

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

O navegador aplica essa consulta de media dentro da imagem, mesmo quando a imagem é carregada por uma simples etiqueta <img> de outro domínio. Põe o sistema em escuro e o contador segue — sem recarregar, sem que a página à volta tenha alguma coisa a ver com isso.

Quanto custa

As duas versões estão no ficheiro, portanto o ficheiro é cerca do dobro. Medido num modelo: 1 029 bytes normalmente, 2 041 com o gémeo escuro. É esse o preço honesto e a razão de não ser a opção por omissão: pede-se por inserção em vez de se impor a todos.

Não há um segundo pedido nem uma segunda ida e volta. Chega um ficheiro, e a metade de que não se precisa nunca chega a ser pintada.

A armadilha pelo meio

Gradientes, filtros e máscaras referenciam-se em SVG por id. As duas versões de um modelo saem do mesmo código, logo ambas trazem gradientes chamados g1, g2 e assim por diante. Mete as duas num documento e a segunda definição de um id simplesmente não vale — a versão escura desenha-se em silêncio com as cores da clara.

Nada dá erro. O ficheiro é válido. Apenas fica com mau aspeto, de uma maneira que é fácil atribuir ao modelo em vez de à montagem.

Antes de as duas metades se juntarem, cada id da versão escura é por isso renomeado com um prefixo, e cada url(#...) que aponta para ele é reescrito em conformidade. É um passo pequeno e saltá-lo produz um defeito que um relance rápido não consegue explicar.

Quando se recusa

Se faltar uma das metades, se alguma não produzir um elemento <svg>, ou se as duas saírem idênticas byte a byte — o que significa que o modelo não tem variante escura — devolve-se a versão clara intacta. Um SVG meio montado seria pior do que modo escuro nenhum, e um contador que se desenha vale mais do que um contador esperto.