Tema seçimini kaydetme

Coddy'nin HTML Journey'sinin JavaScript in Action bölümünün bir parçası — ders 17 / 27.

Kullanıcılar açık ve koyu temalar arasında geçiş yaptığında, web sitesinin tercihlerini hatırlamasını isteriz.
Bunun için JavaScript'te <strong>localStorage</strong> kullanırız. Verileri tarayıcıda saklar ve bu veriler sayfa yenilendikten veya tarayıcı kapatıldıktan sonra bile kalır.

Mantık şöyledir:

Kullanıcı temayı değiştirdiğinde, mevcut temayı localStorage içine kaydedin.
Sayfa yüklendiğinde, localStorage'ı kontrol edin ve kaydedilen temayı otomatik olarak uygulayın.

HTML:

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

CSS:

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

Bu kod, kullanıcının daha önce localStorage içine bir koyu tema kaydedip kaydetmediğini kontrol eder ve sayfa yüklendiğinde bunu uygular.

Butona tıklandığında, sayfada karanlık modu açıp kapatır ve ardından tercihin bir sonraki ziyaret için hatırlanması için localStorage'ı günceller.

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

// Sayfa yüklendiğinde kaydedilen temayı uygula
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
}

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

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

Bu, kullanıcının tercihinin sitenize yaptığı ziyaretler boyunca korunmasını sağlar.

Görev

Kolay

Kullanıcı tercihini hatırlayan bir tema değiştirici oluşturun.

Adımlar:

Sayfa yüklendiğinde: Kullanıcının daha önce karanlık modu seçip seçmediğini kontrol edin
1. Eğer "dark" localStorage içinde kayıtlıysa, body öğesine "dark-mode" sınıfını ekleyin
Değiştirme düğmesine tıklandığında: Açık ve karanlık temalar arasında geçiş yapın
1. body öğesinde "dark-mode" sınıfını değiştirin (toggle)
2. Mevcut temayı localStorage içine kaydedin

Kendin dene

<!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>