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ı istiyoruz.
Bunun için JavaScript'te localStorage kullanıyoruz. Tarayıcıda veri depolar 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, geçerli temayı localStorage içine kaydedin.
Sayfa yüklendiğinde, localStorage öğesini kontrol edin ve kaydedilmiş 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çinde koyu bir tema kaydedip kaydetmediğini kontrol eder ve sayfa yüklendiğinde bu temayı uygular.

Düğmeye tıklandığında, sayfada koyu modu açıp kapatır ve ardından tercihin bir sonraki ziyaret için hatırlanması amacıyla localStorage değerini günceller

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

// Sayfa yüklenirken 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 tercihlerinin sitenizi ziyaretleri boyunca korunmasını sağlar.

Görev

Kolay

Kullanıcı tercihini hatırlayan bir tema geçiş düğmesi oluşturun.

Adımlar:

Sayfa yüklenirken: Kullanıcının daha önce koyu modu seçip seçmediğini kontrol edin
1. localStorage içinde "dark" kayıtlıysa, gövdeye "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. Gövde öğ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>