Penghitung yang mengikuti mode gelap

Penghitung adalah gambar di halaman milik orang lain. Ketika halaman itu punya mode gelap, gambarnya tidak tahu: gambar itu digambar di server, jauh sebelum preferensi sistem pengunjung ada sebagai fakta. Lencana putih di halaman gelap adalah hasil yang biasa, dan tampak seperti lubang.

Lima belas desain di sini tetap bisa menanganinya. Bukan dengan bertanya kepada halaman, dan bukan dengan JavaScript — sama sekali tidak ada JavaScript yang terlibat. Gambarnya beralih dengan sendirinya.

Caranya

SVG bukan gambar, melainkan dokumen, dan dokumen bisa membawa stylesheet. Jadi server menggambar desainnya dua kali, terang dan gelap, memasukkan keduanya ke dalam satu berkas, lalu menambahkan tiga baris CSS:

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

Browser menerapkan media query itu di dalam gambar, bahkan ketika gambar dimuat melalui tag <img> biasa dari domain lain. Alihkan sistem ke mode gelap dan penghitungnya ikut berubah — tanpa memuat ulang, tanpa melibatkan halaman di sekitarnya sama sekali.

Apa biayanya

Kedua versi ada di dalam berkas, jadi ukuran berkasnya kira-kira dua kali lipat. Diukur pada satu desain: 1.029 byte biasanya, 2.041 dengan kembaran gelap. Itulah harga yang jujur dan alasan fitur ini tidak menjadi bawaan: fitur ini diminta per sematan, bukan dipaksakan kepada semua orang.

Tidak ada permintaan kedua dan tidak ada perjalanan bolak-balik kedua. Satu berkas tiba, dan separuh yang tidak diperlukan tidak pernah digambar.

Jebakan di tengah

Gradien, filter, dan mask dalam SVG dirujuk melalui id. Kedua versi sebuah desain dihasilkan oleh kode yang sama, sehingga keduanya membawa gradien bernama g1, g2, dan seterusnya. Masukkan keduanya ke dalam satu dokumen, dan definisi kedua dari sebuah id tidak berlaku begitu saja — versi gelap diam-diam dirender dengan warna versi terang.

Tidak ada kesalahan yang muncul. Berkasnya valid. Hanya saja tampilannya salah, dengan cara yang mudah disalahkan pada desain alih-alih pada perakitannya.

Jadi, sebelum kedua bagian digabungkan, setiap id dalam versi gelap diganti namanya dengan sebuah awalan, dan setiap url(#...) yang merujuk ke salah satunya ditulis ulang agar sesuai. Langkahnya kecil, dan melewatkannya menghasilkan bug yang tidak bisa dijelaskan dengan sekilas pandang.

Kapan ia menolak

Jika salah satu bagian tidak ada, jika salah satunya gagal menghasilkan elemen <svg> yang diharapkan, atau jika keduanya keluar identik hingga ke byte terakhir — yang berarti desain itu tidak punya varian gelap — versi terang dikembalikan tanpa perubahan. SVG yang setengah dirakit akan lebih buruk daripada tidak ada mode gelap sama sekali, dan penghitung yang tergambar lebih berharga daripada penghitung yang cerdik.