Tutorial Membuat Dark Mode di Website Menggunakan CSS Variables

Beberapa tahun lalu, tampilan website selalu seragam — latar putih terang, teks hitam pekat.

Sampai akhirnya muncul tren dark mode, dan segalanya berubah.
Dari Twitter hingga YouTube, hampir semua situs besar kini menyediakan opsi tampilan gelap.

Waktu itu, aku sempat berpikir fitur ini rumit.
Tapi ternyata, setelah mencoba beberapa kali, membuat dark mode di website bisa sesederhana mengganti warna CSS — asalkan kamu tahu trik menggunakan CSS Variables.

Dalam artikel ini, aku akan membimbingmu langkah demi langkah untuk membuat dark mode elegan hanya dengan CSS murni — tanpa framework atau JavaScript berat.
Dan tentu saja, teknik ini sangat berguna untuk siapa pun yang berkecimpung di dunia website development modern.

Mengapa Dark Mode Begitu Populer

Sebelum masuk ke teknis, mari pahami dulu kenapa dark mode bukan sekadar tren gaya.

Ramah di mata: tampilan gelap mengurangi silau, terutama di malam hari.
Hemat baterai: pada layar OLED, warna hitam benar-benar menghemat daya.
Estetika modern: dark mode memberi kesan elegan dan profesional.
Kontrol pengguna: memberi pengunjung kebebasan memilih pengalaman visual mereka.

Dalam konteks website development, fitur dark mode bukan hanya soal tampilan — tapi juga soal user experience yang semakin personal.

Langkah 1: Konsep Dasar CSS Variables

CSS Variables (atau custom properties) memungkinkan kita menyimpan nilai warna dalam variabel yang mudah diubah kapan saja.

Contohnya:


:root {
  --bg-color: #ffffff;
  --text-color: #222222;
}

Kemudian gunakan variabel tersebut:


body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

Dengan konsep ini, kamu tidak perlu mengganti warna satu per satu di ratusan baris CSS — cukup ubah nilai di :root, dan seluruh tema website akan menyesuaikan otomatis.

Langkah 2: Menambahkan Tema Gelap (Dark Mode)

Setelah punya tema terang (light mode), sekarang kita buat versi gelapnya.

Tambahkan kode berikut:


[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #f5f5f5;
}

Artinya, ketika elemen <html> memiliki atribut data-theme="dark", semua variabel warna otomatis berubah.
Kamu tidak perlu menulis ulang CSS untuk tiap elemen — cukup gunakan variabel yang sama.

Langkah 3: Tambahkan Tombol Toggle untuk Dark Mode

Sekarang kita butuh cara bagi pengguna untuk beralih antara light dan dark mode.
Sedikit JavaScript ringan sudah cukup.


<button id="theme-toggle">🌙 Dark Mode</button>

Lalu tambahkan script:


const toggle = document.getElementById('theme-toggle');
const html = document.documentElement;

toggle.addEventListener('click', () => {
  const currentTheme = html.getAttribute('data-theme');
  if (currentTheme === 'dark') {
    html.setAttribute('data-theme', 'light');
    toggle.textContent = '🌙 Dark Mode';
  } else {
    html.setAttribute('data-theme', 'dark');
    toggle.textContent = '☀️ Light Mode';
  }
});

Sekarang coba klik tombolnya — website kamu akan langsung berubah dari terang ke gelap, seolah punya dua kepribadian dalam satu tampilan 😄

Inilah keajaiban kecil website development: mengubah pengalaman pengguna hanya dengan beberapa baris kode.

Langkah 4: Simpan Preferensi Pengguna di Browser

Agar pilihan tema pengguna tidak hilang saat halaman di-refresh, gunakan Local Storage.


const toggle = document.getElementById('theme-toggle');
const html = document.documentElement;

// Cek preferensi sebelumnya
if (localStorage.getItem('theme') === 'dark') {
  html.setAttribute('data-theme', 'dark');
  toggle.textContent = '☀️ Light Mode';
}

toggle.addEventListener('click', () => {
  const currentTheme = html.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  html.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
  toggle.textContent = newTheme === 'dark' ? '☀️ Light Mode' : '🌙 Dark Mode';
});

Dengan kode ini, pengguna akan tetap melihat tema pilihannya meski membuka ulang website keesokan harinya.

Fitur seperti ini terlihat kecil, tapi di dunia website development, perhatian terhadap detail semacam ini bisa membuat pengunjung betah berlama-lama.

Langkah 5: Menyesuaikan Warna Tambahan

Tentu saja, tidak cukup hanya warna latar dan teks.
Kamu bisa menambahkan variabel lain untuk tombol, kartu, link, dan elemen interaktif lainnya.

Contoh:


:root {
  --primary-color: #1a73e8;
  --card-bg: #ffffff;
}

[data-theme="dark"] {
  --primary-color: #8ab4f8;
  --card-bg: #1f1f1f;
}

button {
  background: var(--primary-color);
  color: var(--text-color);
}

.card {
  background: var(--card-bg);
  padding: 16px;
  border-radius: 8px;
}

Dengan cara ini, kamu bisa menjaga konsistensi warna di seluruh halaman tanpa repot menulis ulang gaya CSS.

Langkah 6: Deteksi Otomatis dari Preferensi Sistem

Tahukah kamu, browser modern bisa mendeteksi apakah pengguna lebih suka mode gelap atau terang?
Gunakan media query ini:


@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #f5f5f5;
  }
}

Atau kombinasikan dengan logika JavaScript untuk menetapkan tema default:


if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  html.setAttribute('data-theme', 'dark');
}

Fitur ini membuat website terasa “cerdas” dan responsif terhadap preferensi pengguna — sesuatu yang sangat dihargai dalam desain website development modern.

Langkah 7: Tips Bonus untuk Pengalaman Dark Mode yang Sempurna

Gunakan kontras yang seimbang.
Jangan pakai hitam pekat untuk latar belakang — gunakan abu tua seperti #121212 agar lebih nyaman di mata.
Uji tampilan di semua perangkat.
Pastikan warna teks tetap terbaca di layar HP maupun desktop.
Tambahkan animasi transisi halus.
Sedikit efek fade akan membuat pergantian mode terasa lebih lembut.
```
* {
  transition: background-color 0.3s, color 0.3s;
}
```
Uji aksesibilitas.
Gunakan alat seperti Lighthouse atau Contrast Checker untuk memastikan teks tetap mudah dibaca.

Penutup — Sentuhan Modern di Dunia Website Development

Membuat dark mode bukan sekadar tren, tapi bagian dari pengalaman pengguna yang lebih baik.
Dengan bantuan CSS Variables, kamu bisa mengubah tampilan website secara dinamis tanpa mengorbankan performa.

Yang menarik, teknik ini tidak butuh library besar atau framework khusus.
Cukup CSS dan JavaScript dasar — tapi hasilnya profesional dan futuristik.

Bagi siapa pun yang ingin naik level di dunia website development, fitur seperti dark mode adalah sentuhan kecil yang memberi kesan besar.
Jadi, buka editor-mu, tambahkan beberapa baris CSS, dan biarkan website-mu bersinar — bahkan dalam kegelapan. 🌙✨

Cari Blog Ini

Dye Web Stories: Cerita Pembuatan Website Indonesia

Featured Post

Bagaimana AI Mengubah Cara Kita Membangun Website