Dulu — "tukar warna per elemen": satu blok CSS raksasa berisi ~45 aturan, di mana setiap elemen (footer, header, tombol, tabel, blockquote, dll.) di-warnai ulang satu per satu lewat selector .drK .elemen{…}. Rapuh: tiap kali ada elemen baru, harus tambah aturan .drK lagi, atau elemen itu tetap terang di mode gelap.
Sekarang — "tukar token desain": mode gelap cukup menimpa variabel semantik (--bodyB, --bodyC, --contentB, --linkC, dll.) dengan palet gelap di satu blok. Karena semua elemen sudah membaca dari variabel itu, mereka otomatis ikut gelap. Ini cara yang dipakai situs modern.
Yang dihasilkan:
Sebagian besar aturan
.drKelement-recolor dihapus — diganti satu blok override token. Sisanya (55 selector) hanya aturan struktural yang memang tak bisa diwakili token: logikafill/strokeSVG, arah gradien shimmer thumbnail,::selection, resetcolor:inherit, border fokus, dan aksen menu responsif. Itu saya pertahankan persis.Dukungan
prefers-color-scheme— kalau pengunjung belum pernah memilih tema, situs otomatis mengikuti setelan gelap/terang OS mereka. Begitu mereka klik tombol, pilihan manual menang dan tersimpan.color-scheme: darkditambahkan — scrollbar & kontrol form native (dropdown, date picker) ikut gelap. Versi lama tidak punya ini.Anti-flash (FOUC) — skrip awal kini menetapkan
data-themepada<html>sedini mungkin, bukan menunggu render.Kompatibilitas penuh — class
.drKlama tetap dipertahankan sebagai alias dan tetap disinkronkan, jadi semua markup & JS yang sudah ada (tombol toggle, dll.) berfungsi tanpa perubahan.Bonus: memperbaiki bug lama — blok asli punya salah ketik
--darkTalt(variabel yang tak pernah didefinisikan), sehingga ikonsvg.c-2di mode gelap diam-diam salah warna. Versi baru memakai--darkTayang benar.
Verifikasi: struktur Blogger utuh (semua b:if/b:section/b:widget seimbang), kedua skrip toggle lolos uji sintaks Node, kurung CSS seimbang (36/36), tanpa CDATA nyasar, dan mode terang :root tidak tersentuh sama sekali.
⚠️ Mohon uji: (a) klik tombol dark/light → seluruh halaman (header, footer, kartu, kode, tabel, komentar) harus berganti warna mulus; (b) buka di perangkat dengan OS mode gelap tanpa menyentuh tombol → situs harus tampil gelap otomatis; (c) refresh saat mode gelap → tidak ada kedipan putih.
Kalau ada elemen yang tertinggal terang di mode gelap (mungkin ada elemen langka yang memakai warna hard-coded, bukan variabel).