حفظ اختيار المظهر

عندما ينتقل المستخدمون بين السمات الفاتحة والداكنة، نريد أن يتذكر الموقع اختيارهم.
لهذا، نستخدم 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");
  }
});

يضمن هذا الحفاظ على تفضيلات المستخدم عند زيارته لموقعك في كل مرة.