Cara Membuat Dark Mode dengan CSS

Dark mode (mode gelap) sudah menjadi fitur standar yang diharapkan pengguna di website modern. Selain terlihat elegan, dark mode juga mengurangi kelelahan mata saat browsing di malam hari. Artikel ini membahas dua pendekatan membuat dark mode: otomatis mengikuti preferensi sistem operasi, dan manual dengan tombol toggle yang bisa diklik pengguna.

Konsep Dasar: CSS Variable untuk Theming

Kunci implementasi dark mode yang bersih adalah menggunakan CSS Variable. Definisikan semua warna sebagai variabel, lalu ubah nilainya untuk tema gelap:

/* Tema terang (default) */
:root {
  --warna-bg: #ffffff;
  --warna-bg-sekunder: #f8fafc;
  --warna-teks: #1e293b;
  --warna-teks-muted: #64748b;
  --warna-border: #e2e8f0;
  --warna-kartu: #ffffff;
  --warna-shadow: rgba(0, 0, 0, 0.08);
  --warna-utama: #3b82f6;
  --warna-utama-hover: #2563eb;
}

/* Tema gelap */
[data-tema="gelap"] {
  --warna-bg: #0f172a;
  --warna-bg-sekunder: #1e293b;
  --warna-teks: #f1f5f9;
  --warna-teks-muted: #94a3b8;
  --warna-border: #334155;
  --warna-kartu: #1e293b;
  --warna-shadow: rgba(0, 0, 0, 0.3);
  --warna-utama: #60a5fa;
  --warna-utama-hover: #93c5fd;
}

Menerapkan Variabel ke Elemen

body {
  background-color: var(--warna-bg);
  color: var(--warna-teks);
  transition: background-color 0.3s ease, color 0.3s ease;
  font-family: system-ui, sans-serif;
}

.kartu {
  background: var(--warna-kartu);
  border: 1px solid var(--warna-border);
  box-shadow: 0 2px 8px var(--warna-shadow);
  border-radius: 12px;
  padding: 24px;
}

.teks-muted {
  color: var(--warna-teks-muted);
}

.tombol {
  background: var(--warna-utama);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.tombol:hover {
  background: var(--warna-utama-hover);
}

input, textarea {
  background: var(--warna-bg-sekunder);
  color: var(--warna-teks);
  border: 1px solid var(--warna-border);
  padding: 10px 14px;
  border-radius: 8px;
  width: 100%;
}

---

Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:

Cara Membuat Dark Mode dengan CSS

Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.