Simpan pilihan tema

Termasuk bagian JavaScript dalam Aksi dalam perjalanan HTML di Coddy. Pelajaran 17 dari 27.

Saat pengguna beralih antara tema terang dan gelap, kita ingin situs web mengingat pilihan mereka.
Untuk itu, kita menggunakan localStorage di JavaScript. Fitur ini menyimpan data di browser, dan data tersebut tetap ada bahkan setelah halaman dimuat ulang atau browser ditutup.

Logikanya adalah:

Saat pengguna mengganti tema, simpan tema saat ini ke localStorage.
Saat halaman dimuat, periksa localStorage dan terapkan tema yang tersimpan secara otomatis.

HTML:

<button id="themeToggle">Toggle Theme</button>

CSS:

body.dark-mode {
  background-color: #222;
  color: #fff;
}

Kode ini memeriksa apakah pengguna sebelumnya menyimpan tema gelap di localStorage dan menerapkannya saat halaman dimuat.

Saat tombol diklik, mode gelap di halaman akan diaktifkan atau dinonaktifkan, lalu localStorage diperbarui agar preferensi tersebut diingat saat kunjungan berikutnya

const button = document.getElementById("themeToggle");

// Terapkan tema yang tersimpan saat halaman dimuat
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
}

button.addEventListener("click", function () {
  document.body.classList.toggle("dark-mode");

  // Simpan preferensi
  if (document.body.classList.contains("dark-mode")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
});

Ini memastikan preferensi pengguna tetap tersimpan saat mereka kembali mengunjungi situsmu.

Tantangan

Mudah

Buat tombol pengalih tema yang mengingat preferensi pengguna.

Langkah-langkah:

Saat halaman dimuat: Periksa apakah pengguna sebelumnya memilih mode gelap
1. Jika "dark" tersimpan di localStorage, tambahkan class "dark-mode" ke body
Saat tombol pengalih diklik: Beralih antara tema terang dan gelap
1. Alihkan class "dark-mode" pada elemen body
2. Simpan tema saat ini di localStorage

Coba sendiri

<!DOCTYPE html>
<html>
<head>
  <title>Theme Preference Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="themeToggle">Toggle Theme</button>

  <h1>Saving Theme Preference</h1>
  <p>
    Try switching between light and dark mode using the button above.  
    Refresh the page — your choice is remembered thanks to <strong>localStorage</strong>.
  </p>
  <script src="script.js"></script>
</body>
</html>