Home Coding Cara Membuat Toggle Dark Mode HTML CSS JS yang Responsif

Cara Membuat Toggle Dark Mode HTML CSS JS yang Responsif

Farhan Hidayat 5 April 2026 4 min read

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:

Also Read: 7 Animasi Teks CSS Otomatis yang Bikin Website Lebih Hidup

elemen body
tombol toggle
konten utama

Contoh sederhananya:

<button id="toggle">Dark Mode</button>
<h1>Hello World</h1>
<p>Ini contoh konten</p>

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.

Also Read: Cara Membuat Loading Spinner CSS Simple & Responsif

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

cara membuat dark mode HTML CSS JS

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:

Also Read: 10 Card UI HTML CSS untuk Landing Page yang Responsif & Modern

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

  <button id="toggle">🌙</button>

  <div class="container">
    <h1>Hello World</h1>
    <p>Ini contoh dark mode yang sudah responsif.</p>
  </div>

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

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.

Also Read: 5 Template Footer Website Profesional Gratis & Siap Digunakan

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:

Also Read: 10 Animasi Hover CSS yang Bikin Website Lebih Hidup

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

Tagged with: