Skaitikliai, prisitaikantys prie tamsiojo režimo

Skaitiklis yra paveikslėlis kieno nors puslapyje. Kai tas puslapis turi tamsųjį režimą, paveikslėlis to nežino: jis nupieštas serveryje gerokai anksčiau, nei lankytojo sistemos parinktis tapo faktu. Įprastas rezultatas – baltas ženklelis tamsiame puslapyje, atrodantis kaip skylė.

Penkiolika čia esančių dizainų vis tiek tai sutvarko. Ne klausdami puslapio ir ne su JavaScript — jo čia visai nėra. Paveikslėlis persijungia pats.

Kaip

SVG nėra paveikslas – tai dokumentas, o dokumentas gali turėti stilių aprašą. Todėl serveris nupiešia dizainą dukart, šviesų ir tamsų, sudeda abu į vieną failą ir prideda tris CSS eilutes:

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

Naršyklė pritaiko tą medijos užklausą paveikslėlio viduje, net kai jis įkeliamas iš kito domeno paprasta <img> žyma. Perjunkite sistemą į tamsųjį režimą ir skaitiklis prisitaikys — be pakartotinio įkėlimo ir visai nedalyvaujant aplinkiniam puslapiui.

Kiek tai kainuoja

Abi versijos yra faile, todėl jis maždaug dvigubai didesnis. Išmatuota vienam dizainui: įprastai 1 029 baitai, su tamsiuoju dvyniu – 2 041. Tai tikroji kaina ir priežastis, kodėl tai nėra numatytoji nuostata: prašoma kiekvienam įterpimui, o ne primetama visiems.

Nėra antros užklausos ar antro ryšio ciklo. Atkeliauja vienas failas, o nereikalinga jo pusė niekada nepiešiama.

Spąstai viduryje

Į SVG gradientus, filtrus ir kaukes kreipiamasi pagal id. Abi dizaino versijas generuoja tas pats kodas, todėl abi turi gradientus, vadinamus g1, g2, ir taip toliau. Sudėjus abi į vieną dokumentą, antroji id apibrėžtis tiesiog nepritaikoma — tamsioji versija tyliai atvaizduojama šviesiosios spalvomis.

Jokių klaidų. Failas galiojantis. Jis tiesiog atrodo neteisingai, ir dėl to lengva kaltinti dizainą, o ne surinkimą.

Todėl prieš sujungiant abi puses kiekvienas tamsiosios versijos id pervadinamas pridedant priešdėlį, o kiekvienas url(#...) į jį nukreiptas kreipinys perrašomas atitinkamai. Tai mažas žingsnis, o jį praleidus atsiranda klaida, kurios greitas žvilgsnis nepaaiškina.

Kada atsisakoma

Jei trūksta kurios nors pusės, jei kuri nors nesukuria <svg> elemento arba jei abi baitas į baitą vienodos — tai reiškia, kad dizainas neturi tamsiojo varianto, — šviesioji versija grąžinama nepakeista. Pusė surinkto SVG būtų blogiau nei jokio tamsiojo režimo, o piešiantis skaitiklis vertingesnis už gudrų.