Membuat Dark Mode Toggle dengan JavaScript

Dark mode adalah tampilan antarmuka dengan warna dominan gelap yang membuat mata lebih nyaman, terutama di malam hari.
Banyak situs modern seperti YouTube, Twitter, dan GitHub sudah menerapkan fitur ini. Dengan JavaScript, kamu bisa membuat tombol untuk beralih antara light mode dan dark mode hanya dengan beberapa baris kode. Jadi, dalam tutorial kali ini kita akan belajar Membuat Dark Mode Toggle dengan JavaScript.

Struktur HTML Dasar

Berikut struktur sederhana untuk fitur dark mode toggle:

<div class="container">
  <h1>Dark Mode Toggle dengan JavaScript</h1>
  <p>Aktifkan mode gelap untuk tampilan lebih nyaman di malam hari.</p>

  <label class="switch">
    <input type="checkbox" id="darkToggle">
    <span class="slider"></span>
  </label>
</div>

CSS untuk Mode Terang dan Gelap

Tambahkan gaya dasar untuk dua mode tampilan:

body {
  font-family: sans-serif;
  background: #fff;
  color: #333;
  transition: background 0.3s, color 0.3s;
  text-align: center;
  padding: 40px;
}

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

/* Toggle Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

JavaScript: Logika Dark Mode

Gunakan JavaScript untuk menambahkan dan menghapus kelas dark-mode saat tombol diaktifkan:

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

// Cek preferensi sebelumnya dari localStorage
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
  toggle.checked = true;
}

// Saat tombol diubah
toggle.addEventListener("change", () => {
  if (toggle.checked) {
    document.body.classList.add("dark-mode");
    localStorage.setItem("theme", "dark");
  } else {
    document.body.classList.remove("dark-mode");
    localStorage.setItem("theme", "light");
  }
});

Penjelasan:

• classList.add() dan remove() digunakan untuk mengubah tema halaman.

• localStorage menyimpan preferensi agar pengguna tidak perlu mengubah tema setiap membuka halaman lagi.

• toggle.checked memastikan status tombol sesuai dengan tema terakhir yang digunakan.

Hasil: Tema Tersimpan Otomatis

Kini, pengguna dapat mengaktifkan dark mode dan saat halaman dimuat ulang, mode terakhir akan otomatis digunakan.
Contohnya:

• Aktifkan mode gelap → reload halaman → tetap gelap.

• Kembali ke mode terang → reload → tetap terang.

Studi Kasus: Dark Mode pada Website Portofolio

Kamu bisa menerapkan sistem ini pada website portofolio atau blog pribadi. Cukup tambahkan body.dark-mode di file CSS dan ubah warna sesuai kebutuhan, seperti:

body.dark-mode header {
  background: #1f1f1f;
}
body.dark-mode a {
  color: #90caf9;
}

Dengan ini, seluruh tampilan situs akan menyesuaikan secara otomatis sesuai tema yang dipilih pengguna.

Kesimpulan

Fitur dark mode meningkatkan kenyamanan pengguna dan memberi kesan profesional pada situsmu. Dengan JavaScript dan LocalStorage, kamu bisa:
✅ Membuat toggle switch interaktif.
✅ Menyimpan preferensi pengguna.
✅ Menerapkan transisi halus antar mode.

Sederhana, ringan, dan mudah diterapkan di proyek web apa pun!