Mengenal Dark Mode: Cara Membuat Tema Gelap di Website Menggunakan CSS

Menyelamatkan Mata Pengunjung di Malam Hari

Coba buka Twitter, YouTube, atau VS Code milikmu. Kemungkinan besar kamu mengaturnya ke dalam tema gelap (Dark Mode). Fitur ini membuat mata lebih rileks di tempat minim cahaya sekaligus menghemat baterai HP berbahan layar OLED. Sebagai web developer, menambahkan fitur Dark Mode kini sangat mudah berkat fitur modern CSS Variables.

Langkah 1: Kenalan dengan CSS Variables

Daripada menuliskan kode warna secara mentah seperti #ffffff (putih) di berbagai baris CSS, kita bisa menampung warna tersebut ke dalam sebuah "wadah" (variabel) di tingkat paling atas (root).

:root {
  /* Ini warna untuk Light Mode (Default) */
  --bg-color: #ffffff;
  --text-color: #333333;
}

body {
  /* Cara memanggil variabelnya */
  background-color: var(--bg-color);
  color: var(--text-color);
}

Langkah 2: Menyiapkan Warna Versi Dark Mode

Lalu, bagaimana cara mengubahnya menjadi gelap? Kita cukup membuat *class* baru bernama .dark-theme, dan menimpa isi variabel tadi dengan warna gelap!

.dark-theme {
  /* Jika class ini aktif, timpa warna sebelumnya */
  --bg-color: #121212;
  --text-color: #f1f1f1;
}

Langkah 3: Menyalakan Saklarnya dengan JavaScript

Terakhir, kamu tinggal membuat tombol (toggle) di file HTML-mu, lalu menggunakan sedikit JavaScript untuk menambah atau menghapus class .dark-theme pada tag body.

const btnTheme = document.getElementById('btn-dark-mode');

btnTheme.addEventListener('click', function() {
  // Memasang/mencabut class dark-theme di body
  document.body.classList.toggle('dark-theme');
});

Bonus: Mengikuti Pengaturan Sistem HP Secara Otomatis

Kamu bahkan bisa menyetel Dark Mode agar otomatis aktif jika pengaturan utama HP pengunjung sedang dalam mode gelap. Gunakan Media Query CSS khusus bernama prefers-color-scheme.

/* Otomatis gelap kalau HP user lagi mode gelap */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #f1f1f1;
  }
}

Kesimpulan

Membuat Dark Mode tidak berarti kamu harus membuat ulang kodemu dua kali lipat. Dengan perencanaan *CSS Variables* yang rapi sejak awal, kamu bisa dengan mudah menukar puluhan warna hanya dengan mengubah beberapa baris kode variabel di root.