Počítadla, která sledují tmavý režim

Počítadlo je obrázek na cizí stránce. Když má ta stránka tmavý režim, obrázek o tom neví: byl vykreslen na serveru dávno předtím, než systémové nastavení návštěvníka vůbec existovalo jako fakt. Obvyklým výsledkem je bílá plaketa na tmavé stránce a vypadá jako díra.

Patnáct zdejších designů si s tím přesto poradí. Ne tím, že by se ptaly stránky, a ne pomocí JavaScriptu — žádný v tom není. Obrázek se přepne sám.

Jak

SVG není obrázek, je to dokument, a dokument může nést stylopis. Server tedy design vykreslí dvakrát, světle a tmavě, vloží obě verze do jednoho souboru a přidá tři řádky CSS:

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

Prohlížeč tento media query uplatní uvnitř obrázku, i když se obrázek načítá obyčejným tagem <img> z jiné domény. Přepněte systém do tmavého režimu a počítadlo ho následuje — bez nového načtení a bez toho, aby se okolní stránka vůbec zapojila.

Kolik to stojí

Obě verze jsou v souboru, takže soubor je zhruba dvakrát větší. Naměřeno na jednom designu: normálně 1 029 bajtů, s tmavým dvojčetem 2 041. To je poctivá cena a důvod, proč to není výchozí: vyžádá se to u jednotlivého vložení, místo aby se to vnutilo všem.

Není tu žádný druhý požadavek ani druhá cesta tam a zpět. Dorazí jeden soubor a polovina, která není potřeba, se nikdy nevykreslí.

Past uprostřed

Na přechody, filtry a masky se v SVG odkazuje přes id. Obě verze designu generuje stejný kód, takže obě přinášejí přechody pojmenované g1, g2, a tak dále. Dejte obě do jednoho dokumentu a druhá definice téhož id se prostě neuplatní — tmavá verze se tiše vykreslí v barvách světlé.

Nic nehlásí chybu. Soubor je platný. Jen vypadá špatně, a to způsobem, který se snadno přičte designu místo skládání.

Než se tedy obě poloviny spojí, každé id v tmavé verzi se přejmenuje s předponou a každý výskyt url(#...) odkazující na některé z nich se odpovídajícím způsobem přepíše. Je to malý krok a jeho vynechání vede k chybě, kterou zběžný pohled nevysvětlí.

Kdy odmítne

Pokud některá z polovin chybí, pokud některá nevytvoří <svg> element, nebo pokud obě vyjdou bajtově totožné — což znamená, že design nemá tmavou variantu — vrátí se beze změny světlá verze. Napůl složené SVG by bylo horší než žádný tmavý režim a počítadlo, které se vykreslí, má větší cenu než počítadlo, které je chytré.