Loendurid, mis järgivad tumedat režiimi

Loendur on pilt kellegi teise lehel. Kui sel lehel on tume režiim, pilt sellest ei tea: see joonistati serveris ammu enne seda, kui külastaja süsteemieelistus faktina üldse olemas oli. Tavaline tulemus on valge märk tumedal lehel ja see näeb välja nagu auk.

Viisteist siinset kujundust saab sellega siiski hakkama. Mitte lehelt küsides ega JavaScripti abil — seda pole üldse kasutusel. Pilt lülitub ise ümber.

Kuidas

SVG ei ole pilt, see on dokument, ja dokument võib kanda laadilehte. Server joonistab kujunduse kaks korda, heleda ja tumeda, paneb mõlemad ühte faili ning lisab kolm rida CSS-i:

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

Brauser rakendab seda meediapäringut pildi sees isegi siis, kui pilt laaditakse teiselt domeenilt tavalise <img> sildi kaudu. Lülitage süsteem tumedale ja loendur järgneb — ilma uuesti laadimata, ilma et ümbritsev leht sellega mingit pistmist oleks.

Mis see maksab

Mõlemad versioonid on failis, nii et fail on umbes kaks korda suurem. Mõõdetud ühel kujundusel: 1 029 baiti tavaliselt, 2 041 koos tumeda kaksikuga. See on aus hind ja põhjus, miks see ei ole vaikimisi: seda küsitakse manustamise kohta, mitte ei panda kõigile peale.

Teist päringut ega teist edasi-tagasi käiku ei ole. Saabub üks fail ja see pool, mida pole vaja, ei joonistata kunagi.

Lõks keskel

SVG-s viidatakse gradientidele, filtritele ja maskidele id kaudu. Mõlemad kujunduse versioonid genereerib sama kood, nii et mõlemad toovad kaasa gradiendid nimega g1, g2, jne. Pange mõlemad ühte dokumenti ja id teine definitsioon lihtsalt ei rakendu — tume versioon joonistub vaikselt heleda versiooni värvides.

Viga ei teatata. Fail on kehtiv. See näeb lihtsalt vale välja viisil, mida on kerge omistada kujundusele, mitte kokkupanekule.

Seetõttu antakse enne kahe poole ühendamist tumeda versiooni igale id-le eesliide ja iga sellele viitav url(#...) kirjutatakse vastavalt ümber. See on väike samm ning selle vahelejätmine tekitab vea, mida kiire pilk ei seleta.

Kui see keeldub

Kui kumbki pool puudub, kui kummastki ei teki <svg> elementi või kui mõlemad tulevad baidi haaval ühesugused — see tähendab, et kujundusel pole tumedat varianti — tagastatakse hele versioon muutmata. Pooleldi kokku pandud SVG oleks hullem kui üldse mitte tume režiim ja loendur, mis joonistab, on rohkem väärt kui nutikas loendur.