Счётчик, который уходит за страницей в тёмную тему

Счётчик — это картинка на чужой странице. Когда у этой страницы есть тёмная тема, картинка об этом не знает: её нарисовали на сервере задолго до того, как системная настройка посетителя вообще стала фактом. Белый значок на тёмной странице — обычный итог, и выглядит он как дыра.

Пятнадцать здешних оформлений справляются всё равно. Не спрашивая страницу и без 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(#...), указывающий на него, переписывается следом. Маленький шаг, и пропустить его значит получить дефект, который беглый взгляд объяснить не может.

Когда он отказывается

Если одной из половин нет, если какая-то не даёт элемента <svg>, или если обе выходят одинаковыми байт в байт — то есть у оформления нет тёмного варианта — возвращается светлая версия без изменений. Наполовину собранный SVG был бы хуже, чем отсутствие тёмной темы, а счётчик, который рисуется, стоит больше, чем счётчик, который умён.