حفظ اختيار السمة

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

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