Броячи, които следват тъмния режим

Броячът е изображение върху чужда страница. Когато тази страница има тъмен режим, изображението не знае за това: то е изчертано на сървъра много преди системната настройка на посетителя да съществува като факт. Обичайният резултат е бяла значка върху тъмна страница и тя изглежда като дупка.

Петнадесет от дизайните тук все пак се справят с това. Не като питат страницата и не с JavaScript — такъв изобщо не участва. Изображението превключва само.

Как

SVG не е картина, а документ, а документът може да носи стилов лист. Затова сървърът изчертава дизайна два пъти, светъл и тъмен, слага и двата в един файл и добавя три реда CSS:

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

Браузърът прилага тази медийна заявка вътре в изображението дори когато то е заредено чрез обикновен таг <img> от друг домейн. Превключете системата на тъмен режим и броячът следва — без презареждане и без околната страница изобщо да участва.

Каква е цената

И двете версии са във файла, затова той е около два пъти по-голям. Измерено при един дизайн: 1 029 байта нормално, 2 041 с тъмния двойник. Това е честната цена и причината да не е по подразбиране: заявява се за всяко вграждане поотделно, вместо да се налага на всички.

Няма втора заявка и второ пътуване до сървъра и обратно. Пристига един файл, а ненужната половина никога не се изрисува.

Капанът по средата

Към градиентите, филтрите и маските в SVG се препраща чрез id. И двете версии на един дизайн се генерират от един и същ код, затова и двете носят градиенти с имена g1, g2, както и други подобни. Сложете двете в един документ и второто определение на даден id просто не се прилага — тъмната версия тихо се изобразява в цветовете на светлата.

Няма грешка. Файлът е валиден. Просто изглежда погрешно по начин, който лесно се приписва на дизайна, а не на сглобяването.

Затова, преди двете половини да бъдат съединени, всеки id в тъмната версия се преименува с префикс, а всяка препратка url(#...) към такъв id се пренаписва съответно. Стъпката е малка, а пропускането ѝ създава грешка, която бегъл поглед не може да обясни.

Кога отказва

Ако някоя от половините липсва, ако някоя не създаде елемент <svg> или ако двете излязат идентични до байт — което означава, че дизайнът няма тъмен вариант — връща се светлата версия без промяна. Половин сглобен SVG би бил по-лош от липсата на тъмен режим, а брояч, който се изчертава, струва повече от брояч, който е хитър.