Cara Membuat Toggle Dark Mode HTML CSS JS yang Responsif

Farhan Hidayat — Sun, 05 Apr 2026 04:35:38 +0000

Dark mode bukan sekadar tren, tapi sudah jadi kebutuhan di banyak website modern. Selain itu, tampilan gelap juga bikin mata lebih nyaman, terutama saat digunakan di malam hari. Nah, di artikel ini kamu akan belajar cara membuat dark mode HTML CSS JS yang responsif, simpel, dan bisa langsung dipakai di project kamu.

Kenapa Dark Mode Penting untuk Website Modern?

Pertama, dark mode membantu mengurangi ketegangan mata. Terutama, saat user mengakses website dalam kondisi minim cahaya. Selain itu, banyak pengguna sekarang memang lebih suka tampilan gelap karena terasa lebih elegan dan fokus.

Di sisi lain, dark mode juga meningkatkan user experience. Website jadi terlihat lebih modern, profesional, dan mengikuti tren UI saat ini. Jadi, kalau kamu ingin websitemu terasa “niat”, fitur ini wajib dipertimbangkan.

Persiapan Sebelum Membuat Dark Mode

Struktur Dasar HTML

Sebelum mulai, pastikan kamu punya struktur HTML sederhana. Minimal, kamu butuh:

elemen body
tombol toggle
konten utama

Contoh sederhananya:


Hello World
Ini contoh konten

Konsep Dasar Dark Mode

Secara umum, dark mode bekerja dengan cara menambahkan class tertentu ke elemen body. Misalnya, saat user klik tombol, maka class seperti .dark-mode akan aktif.

Kemudian, CSS akan mengatur perubahan warna berdasarkan class tersebut. Sementara itu, JavaScript bertugas untuk mengatur toggle-nya.

Cara Membuat Toggle Dark Mode HTML CSS JS (Full Code)

Sekarang langsung ke bagian inti. Ini sudah versi final + responsif, jadi bisa langsung kamu pakai.

1. Menyiapkan HTML (Toggle Button)

Pertama, kamu buat tombol sebagai trigger:




  
  
  Dark Mode Responsive
  



  

  
    Hello World
    Ini contoh dark mode yang sudah responsif.

Simbol ini opsional, tapi biasanya dipakai biar lebih user-friendly.

2. Styling Dark Mode dengan CSS

Selanjutnya, kamu buat styling untuk mode terang dan gelap:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #ffffff;
  color: #000000;
  transition: 0.3s;
}

/* Container */
.container {
  max-width: 800px;
  margin: auto;
  padding: 40px;
}

/* Toggle Button */
#toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  border-radius: 20px;
}

/* Dark Mode */
.dark-mode {
  background: #121212;
  color: #ffffff;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .container {
    padding: 20px;
    text-align: center;
  }

  h1 {
    font-size: 24px;
  }

  #toggle {
    top: 10px;
    right: 10px;
    padding: 8px 12px;
  }
}

Di sini, kita pakai class .dark-mode untuk mengubah tampilan. Selain itu, tambahkan transition supaya perpindahannya lebih halus.

3. Menambahkan JavaScript untuk Toggle

Setelah itu, tambahkan JavaScript:

const toggle = document.getElementById("toggle");

toggle.addEventListener("click", () => {
  document.body.classList.toggle("dark-mode");
});

Dengan script ini, setiap kali tombol diklik, mode akan berubah otomatis. Jadi, user bisa langsung merasakan perbedaannya.

Kesalahan yang Sering Terjadi Saat Membuat Dark Mode

Meskipun terlihat simpel, ada beberapa kesalahan yang sering terjadi:

warna terlalu gelap atau terlalu kontras
lupa menyesuaikan semua elemen (misalnya card, navbar)
toggle tidak konsisten
tidak menyimpan preferensi user

Akibatnya, pengalaman user jadi kurang maksimal.

Tips Biar Hasil Dark Mode Lebih Maksimal

Agar hasilnya lebih optimal, kamu bisa terapkan beberapa tips ini:

gunakan warna abu-abu gelap, bukan hitam pekat
tambahkan animasi transisi biar smooth
simpan preferensi user dengan localStorage
uji tampilan di berbagai device

Dengan begitu, dark mode kamu tidak cuma berfungsi, tapi juga nyaman digunakan.

Kesimpulan

Pada akhirnya, cara membuat dark mode HTML CSS JS ternyata tidak sesulit yang dibayangkan. Dengan kombinasi HTML, CSS, dan JavaScript sederhana, kamu sudah bisa membuat fitur yang terlihat modern dan profesional.

Selain itu, dark mode juga memberi nilai tambah dari sisi user experience. Jadi, kalau kamu ingin upgrade tampilan website, fitur ini bisa jadi langkah awal yang tepat.

Udah coba bikin dark mode tapi hasilnya belum maksimal?
Tenang, kamu bisa dalami lagi dari referensi berikut biar tampilannya makin profesional 👇

Panduan prefers-color-scheme (MDN)

Cara kerja classList di JavaScript

Complete Guide Dark Mode (CSS Tricks)

ArtikelPro

Artikel Cara Membuat Toggle Dark Mode HTML CSS JS yang Responsif pertama kali tampil pada Farhanhidayat.com.