Licznik, który idzie za stroną w tryb ciemny

Licznik to obrazek na cudzej stronie. Kiedy ta strona ma tryb ciemny, obrazek o tym nie wie: został narysowany na serwerze, na długo zanim ustawienie systemowe odwiedzającego w ogóle stało się faktem. Biała odznaka na ciemnej stronie to zwykły wynik i wygląda jak dziura.

Piętnaście tutejszych wzorów mimo to sobie z tym radzi. Nie pytając strony i nie przez JavaScript — żaden w tym nie uczestniczy. Obrazek przełącza się sam.

Jak

SVG to nie obrazek, tylko dokument, a dokument może nieść arkusz stylów. Serwer rysuje więc wzór dwa razy, jasny i ciemny, wkłada oba do jednego pliku i dodaje trzy wiersze CSS:

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

Przeglądarka stosuje to zapytanie medialne wewnątrz obrazka, nawet gdy obrazek jest ładowany zwykłym znacznikiem <img> z innej domeny. Przełącz system na ciemny, a licznik pójdzie za nim — bez przeładowania, bez udziału otaczającej strony.

Ile to kosztuje

Obie wersje są w pliku, więc plik jest mniej więcej dwa razy większy. Zmierzone na jednym wzorze: 1 029 bajtów zwykle, 2 041 z ciemnym bliźniakiem. To uczciwa cena i powód, dla którego nie jest to ustawienie domyślne: prosi się o to przy osadzeniu, zamiast narzucać wszystkim.

Nie ma drugiego żądania ani drugiego obiegu. Przychodzi jeden plik, a połowa, która nie jest potrzebna, nigdy nie zostaje narysowana.

Pułapka pośrodku

Gradienty, filtry i maski wskazuje się w SVG przez id. Obie wersje wzoru powstają z tego samego kodu, więc obie przynoszą gradienty o nazwach g1, g2 i tak dalej. Włóż oba do jednego dokumentu, a druga definicja id po prostu nie obowiązuje — ciemna wersja po cichu rysuje się w kolorach jasnej.

Nic nie zgłasza błędu. Plik jest poprawny. Po prostu wygląda źle, w sposób, który łatwo przypisać wzorowi zamiast montażowi.

Zanim więc obie połówki się złączą, każde id ciemnej wersji dostaje przedrostek, a każde url(#...), które na nie wskazuje, zostaje przepisane. Drobny krok, a pominięcie go daje usterkę, której szybki rzut oka nie wyjaśni.

Kiedy odmawia

Jeśli którejś połówki brakuje, jeśli któraś nie daje elementu <svg>, albo jeśli obie wychodzą identyczne co do bajta — czyli wzór nie zna trybu ciemnego — wraca jasna wersja bez zmian. Do połowy złożony SVG byłby gorszy niż brak trybu ciemnego, a licznik, który się rysuje, jest wart więcej niż licznik sprytny.