Membangun Dark Mode yang Benar dengan Tailwind CSS

Langkah 1: Token Warna dengan CSS Variables

Jangan hardcode warna di mana-mana. Definisikan token di :root, lalu ganti nilainya saat mode gelap aktif:

:root {
  --color-bg: 255 255 255;
  --color-text: 23 23 23;
}
.dark {
  --color-bg: 10 10 15;
  --color-text: 240 240 245;
}

Di Tailwind, daftarkan sebagai warna semantic:

colors: {
  bg: 'rgb(var(--color-bg) / <alpha-value>)',
  text: 'rgb(var(--color-text) / <alpha-value>)'
}

Sekarang bg-bg text-text otomatis ikut berubah — komponen tidak perlu tahu ada dark mode.

Langkah 2: Simpan Preferensi

Tiga pilihan itu cukup: terang, gelap, ikuti sistem.

const theme = useCookie('theme', { default: () => 'system' })
const isDark = computed(() =>
  theme.value === 'dark' ||
  (theme.value === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
)

Hindari FOUC (Flash of Unstyled Content)

Kesalahan klasik: halaman sempat putih sesaat sebelum JS jalan. Solusinya, inline script kecil sebelum CSS utama dievaluasi:

<script>
  const t = localStorage.theme ?? 'system'
  if (t === 'dark' || (t === 'system' && matchMedia('(prefers-color-scheme: dark)').matches))
    document.documentElement.classList.add('dark')
</script>

Prinsipnya: keputusan tema harus terjadi lebih dulu daripada render pertama, bukan setelahnya.

Kontras Itu Raja

Beberapa angka praktis dari pengalaman saya:

1. Teks utama minimal rasio kontras 7:1 di mode gelap
2. Hindari hitam murni #000 — pakai near-black seperti #0A0A0F
3. Border butuh lebih terang di dark mode (white/10) supaya kartu tetap terlihat

Dark mode yang baik malah membuat hierarki visual lebih jelas. Selamat mencoba!