الوضع الداكن لموقعك · البرمجة مع مارتن

مفتاح تبديل بين السمة الفاتحة والداكنة يتذكّره الموقع حتى بعد إغلاق المتصفح.

كيف سيعمل

الوضع الداكن تعويذة من جزأين:

CSS يجهّز «زياً» ثانياً – قواعد تُطبَّق فقط عندما تحمل الصفحة الـ class dark.
JavaScript يضيف أو يزيل ذلك الـ class عند النقر. ويكتب اختيارك في ذاكرة المتصفح، ليبقى سارياً غداً أيضاً.

شاهد معي: الزي الداكن في CSS

أضف هذا في نهاية style.css:

body.dark {
  background-color: #1c1917;
  color: #f5f0ea;
}

body.dark h1,
body.dark h2 {
  color: #93c5fd;
}

body.dark .card {
  background-color: #292524;
  color: #f5f0ea;
}

اقرأه هكذا: «عندما يملك body الـ class dark، تُطبَّق هذه القواعد.» بلا الـ class، لا يُستخدم شيء من هذا.

💡

عدّل الألوان لتناسب موقعك – مرّ على CSS وابتكار أخاً داكناً لكل لون فاتح. القاعدة ثابتة: خلفية داكنة → نص فاتح.

شاهد معي: المفتاح في JavaScript

أضف زراً إلى الرأس (داخل <nav>):

<button id="switch">🌙</button>

وفي script.js:

const switchButton = document.getElementById("switch");

// When the page loads: remember what the visitor picked last time
if (localStorage.getItem("mode") === "dark") {
  document.body.classList.add("dark");
  switchButton.textContent = "☀️";
}

switchButton.addEventListener("click", () => {
  document.body.classList.toggle("dark");

  if (document.body.classList.contains("dark")) {
    localStorage.setItem("mode", "dark");
    switchButton.textContent = "☀️";
  } else {
    localStorage.setItem("mode", "light");
    switchButton.textContent = "🌙";
  }
});

ثلاث أشياء جديدة:

classList.toggle("dark") – «إن وُجد الـ class أزله؛ وإن لم يوجد أضفه.» مفتاح في سطر واحد.
classList.contains("dark") – «هل يملكه الآن؟» (يرجع true/false، مفيد في شرط).
localStorage – دفتر ملاحظات المتصفح. setItem يكتب فيه، وgetItem يقرأ منه. ما تحفظه هناك يبقى حتى بعد إغلاق المتصفح. (في الواقع، هذا الموقع نفسه يستخدمه لحفظ تقدّمك وأنت تتعلّم!)

دورك الآن 💪

أضف زياً داكناً إلى style.css الخاص بك – مرّ على كل ألوانك (الخلفية، الرأس، البطاقات، التذييل، الشارات) وأعطها نسخاً داكنة تحت body.dark.
أضف زر التبديل إلى الرأس على كل صفحة والكود إلى script.js.
جرّبه: بدّل إلى الداكن، أغلق المتصفح، افتح الموقع مجدداً – يجب أن يفتح مباشرة في الوضع الداكن.

مثال لزي داكن أكمل (عدّل الألوان لمشروعك)

body.dark {
  background-color: #1c1917;
  color: #f5f0ea;
}

body.dark h1,
body.dark h2,
body.dark h3 {
  color: #93c5fd;
}

body.dark header {
  background-color: #0f172a;
}

body.dark .card {
  background-color: #292524;
  color: #f5f0ea;
  box-shadow: none;
}

body.dark footer {
  background-color: #0f172a;
}

body.dark a {
  color: #93c5fd;
}

✅

تحقق من نفسك: النقر على 🌙 يجعل الموقع داكناً (والأيقونة تتغيّر إلى ☀️)، والنقر على ☀️ يعيده فاتحاً. بعد إغلاق المتصفح وإعادة فتحه، الموقع يتذكّر اختيارك. هذه ميزة كثير من مواقع «الكبار» لا تملكها أصلاً!

ما ستخرج به من هذا الدرس

الوضع الداكن = زي CSS جاهز (body.dark) + JavaScript يبدّل الـ class.
classList.toggle() يضيف/يزيل class، وclassList.contains() يتحقق منه.
localStorage ذاكرة دائمة للمتصفح: setItem("key", "value") وgetItem("key").