שמירת בחירת ערכת הנושא

כשמשתמשים עוברים בין ערכות נושא בהירות וכהות, אנחנו רוצים שהאתר יזכור את הבחירה שלהם.
לשם כך, אנחנו משתמשים ב־<strong>localStorage</strong> ב־JavaScript. הוא מאחסן נתונים בדפדפן, והנתונים האלה נשארים גם לאחר רענון הדף או סגירת הדפדפן.

ההיגיון הוא:

1. כשהמשתמש מחליף את ערכת הנושא, יש לשמור את ערכת הנושא הנוכחית ב-localStorage.
2. כשהדף נטען, יש לבדוק את localStorage ולהחיל את ערכת הנושא שנשמרה באופן אוטומטי.

HTML:

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

CSS:

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

הקוד הזה בודק אם המשתמש שמר בעבר ערכת נושא כהה ב־localStorage ומחיל אותה כשהדף נטען.

כאשר לוחצים על הכפתור, הוא מחליף את מצב הכהה בדף ואז מעדכן את localStorage כדי שההעדפה תישמר לביקור הבא

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

// החל את ערכת הנושא השמורה בעת טעינת הדף
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
}

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

  // שמור את ההעדפה
  if (document.body.classList.contains("dark-mode")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
});

כך ההעדפה של המשתמש נשמרת גם בביקורים חוזרים באתר שלך.