Tema seçimini kaydet

Coddy'nin HTML Journey'sinin JavaScript Eylemde 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 geçişi oluşturun.

Adımlar:

Sayfa yüklendiğinde: Kullanıcının daha önce koyu modu seçip seçmediğini kontrol edin
1. localStorage içinde "dark" kayıtlıysa, body öğesine "dark-mode" sınıfını ekleyin
Geçiş düğmesine tıklandığında: Açık ve koyu temalar arasında geçiş yapın
1. body öğesindeki "dark-mode" sınıfını açıp kapatın
2. Geçerli 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>