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

כשמשתמשים עוברים בין ערכות נושא בהירות וכהות, אנחנו רוצים שהאתר יזכור את הבחירה שלהם.
לשם כך, אנחנו משתמשים ב־localStorage ב־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");
  }
});

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