Dark Mode di Tailwind: Light, Dark, dan System

Pengunjung makin terbiasa memilih sendiri tampilan terang atau gelap. Tutorial ini membuat tiga pilihan: terang, gelap, dan mengikuti pengaturan perangkat.

Mengaktifkan varian dark

Di Tailwind 4, varian dark: bisa diikat ke kelas di elemen html:

@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

Menyimpan pilihan pengunjung

Pilihan disimpan di localStorage, lalu kelas dark dipasang sesuai pilihan itu.

const mode = localStorage.getItem('mode') || 'system'
const dark = mode === 'dark' || (mode === 'system' && matchMedia('(prefers-color-scheme: dark)').matches)
document.documentElement.classList.toggle('dark', dark)

Mencegah kedipan

Letakkan skrip di atas sebagai skrip kecil di dalam <head>, sebelum CSS dimuat. Dengan begitu halaman langsung tampil dalam mode yang benar.