Pernah buka website dark mode tapi layarnya kedip putih dulu sepersekian detik? Itu namanya flash of wrong theme — tema yang benar baru diterapkan setelah JavaScript selesai dimuat.

Solusinya sederhana: tentukan tema SEBELUM browser menggambar halaman. Caranya, taruh script kecil langsung di dalam <head>, sebelum CSS dimuat.

<script>
(function(){
  try {
    var t = localStorage.getItem("theme") || "light";
    document.documentElement.dataset.theme = t;
  } catch(e){}
})();
</script>

Script ini membaca pilihan tema dari localStorage dan menempelkannya sebagai atribut data-theme di <html> — semuanya terjadi sebelum first paint, jadi tidak ada kedipan sama sekali.

Lalu di CSS, definisikan variabel untuk tiap tema. Semua warna website cukup mengacu ke variabel ini, dan ganti tema jadi semudah mengganti satu atribut.

:root { --bg: #0b0b0d; --body: #f2f2f0; }
[data-theme="light"] { --bg: #f4f2ed; --body: #1c1c1a; }
body { background: var(--bg); color: var(--body); }

Untuk mode "otomatis", baca matchMedia("(prefers-color-scheme: dark)") dan dengarkan perubahannya — jadi website ikut tema HP secara live. Kecil, tapi detail seperti ini yang bikin website terasa premium.