Cara Membuat Dark Mode di Next.js Menggunakan Tailwind CSS

Kamu mungkin sudah memiliki antarmuka pengguna yang rapi dengan tema terang. Sekarang saatnya menambahkan fitur mode gelap tanpa membuat struktur kode menjadi berantakan. Hal ini bisa dilakukan dengan cukup sederhana asalkan penamaan kelas sudah disiplin sejak awal.

Bayangkan mode gelap ini seperti tema alternatif dari sebuah aplikasi yang sama. Mekanisme utamanya sama sekali tidak berubah. Kamu hanya menyesuaikan palet visual agar mata pengguna tetap nyaman dalam kondisi cahaya ruangan yang berbeda.

Pada Tailwind CSS, kamu bisa mengaktifkan strategi tema berbasis kelas. Pendekatan ini memungkinkan kamu untuk sekadar menambah atau menghapus kelas pada elemen utama dokumen. Cara ini jauh lebih fleksibel dibandingkan hanya mengandalkan preferensi sistem operasi pengguna.

Untuk memulainya, kamu perlu mengatur konfigurasi Tailwind agar mengenali mode gelap berbasis kelas. Buka file konfigurasi Tailwind milikmu dan tambahkan pengaturan berikut.

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Langkah di atas sangat penting karena memberitahu Tailwind untuk tidak bergantung pada pengaturan sistem secara otomatis. Dengan nilai kelas tersebut, Tailwind hanya akan menerapkan gaya mode gelap jika elemen HTML memiliki kelas khusus. Ini memberi kamu kendali penuh untuk membuat tombol pengubah tema secara manual.

Alur logika dasarnya cukup mudah untuk diikuti. Pertama, simpan pilihan tema pengguna ke dalam penyimpanan lokal peramban. Saat aplikasi dimuat ulang, baca preferensi terakhir tersebut. Terakhir, tambahkan kelas gelap ke tag HTML jika mode tersebut memang sedang aktif.

Setelah logika berjalan, gunakan varian khusus Tailwind pada komponen penting. Fokuskan perhatian kamu pada warna latar, teks, garis batas, dan efek saat kursor melayang. Jangan langsung mengubah gaya semua elemen sekaligus karena akan membuat kamu kesulitan memeriksa kontras warna.