Dark mode atau mode gelap kini menjadi salah satu fitur populer dalam desain website modern. Selain memberikan tampilan yang elegan dan kekinian, dark mode juga membantu mengurangi ketegangan mata dan menghemat baterai, terutama pada perangkat mobile.

Dalam artikel ini, kita akan membahas cara membuat dark mode di website dengan langkah-langkah sederhana yang bisa diterapkan pada website HTML/CSS biasa atau WordPress.

Kenapa Website Perlu Punya Dark Mode?

Sebelum masuk ke cara implementasi, berikut beberapa keuntungan dark mode untuk pengunjung dan pemilik website:

  • 🌙 Lebih nyaman untuk mata di malam hari
  • 🔋 Menghemat konsumsi baterai (pada layar OLED/AMOLED)
  • 🎯 Terlihat lebih modern dan profesional
  • 👀 Memberi kesan premium dan meningkatkan user experience

Cara Membuat Dark Mode di Website (HTML & CSS Manual)

1. Siapkan Struktur HTML Dasar

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="toggle-dark">Toggle Dark Mode</button>

  <div class="content">
    <h1>Selamat datang di website dengan Dark Mode!</h1>
    <p>Ini adalah contoh implementasi dark mode secara sederhana.</p>
  </div>

  <script src="script.js"></script>
</body>
</html>

2. Tambahkan CSS untuk Mode Terang dan Mode Gelap

/* style.css */
body {
  background-color: white;
  color: black;
  font-family: sans-serif;
  transition: all 0.3s ease;
}

.dark-mode {
  background-color: #121212;
  color: #f1f1f1;
}

button {
  margin: 20px;
  padding: 10px 20px;
  cursor: pointer;
}

3. Tambahkan JavaScript Toggle Dark Mode

// script.js
const toggleButton = document.getElementById('toggle-dark');
toggleButton.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});

4. (Opsional) Simpan Preferensi di Local Storage

// Tambahkan ke script.js
// Simpan preferensi user agar tetap aktif setelah reload

if (localStorage.getItem('mode') === 'dark') {
  document.body.classList.add('dark-mode');
}

toggleButton.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
  const mode = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
  localStorage.setItem('mode', mode);
});

Cara Membuat Dark Mode di WordPress (Tanpa Plugin)

Untuk kamu pengguna WordPress, ada dua cara:

1. Menggunakan CSS Manual + Customizer

  • Tambahkan kode CSS dark mode di Additional CSS
  • Gunakan JavaScript toggle di header/footer
  • Tambahkan tombol toggle ke header atau sidebar

2. Menggunakan Plugin Dark Mode

Rekomendasi plugin:

  • WP Dark Mode
    Plugin ini memungkinkan dark mode otomatis berdasarkan sistem pengguna atau manual dengan toggle. Versi gratisnya sudah cukup lengkap.

Tips Desain Dark Mode yang Baik

  • Gunakan warna abu-abu tua (#121212) sebagai latar, bukan hitam pekat (#000)
  • Hindari teks putih murni (#fff) — gunakan abu terang (#f1f1f1) untuk mengurangi kontras ekstrem
  • Pastikan tombol dan link tetap terlihat jelas di kedua mode
  • Gunakan ikon atau animasi kecil sebagai indikator perubahan mode

Kesimpulan

Dark mode bukan sekadar tren, tapi fitur penting untuk meningkatkan kenyamanan dan pengalaman pengguna. Dengan implementasi yang tepat, website kamu akan tampil lebih profesional, kekinian, dan ramah pengguna.

Kamu bisa menerapkannya dengan mudah menggunakan CSS dan JavaScript dasar, atau lewat plugin WordPress jika tidak ingin repot dengan koding.

Butuh Bantuan Profesional untuk Website Perusahaan yang Berkualitas atau mendesain ulang website kamu?

Hubungi Tim BulbanDigital sekarang juga! Kami siap membantu Anda mulai dari nol hingga website online dengan desain menarik, performa optimal, dan siap tampil di pencarian Google.

Dapatkan:
✅ Konsultasi Gratis
✅ Desain Mobile-Friendly
✅ Proses Cepat & Terpercaya