شبكة تعلم مع ناو

ما التقنيات اللازمة لزر تبديل الوضع الداكن والفاتح في الموقع؟

زر يبدّل الموقع بين الوضع الداكن والفاتح يحتاج الثلاثة معًا: HTML وCSS وJavaScript:

  • HTML لإنشاء الزر.
  • CSS لتعريف ألوان كل وضع.
  • JavaScript للتبديل بين الوضعين عند النقر.

مثال بسيط

<button id="theme-toggle">Dark mode</button>
body { background: #fff; color: #111; }
body.dark { background: #111; color: #eee; }
document.getElementById('theme-toggle').addEventListener('click', () => {
  document.body.classList.toggle('dark');
});

ولتحسين التجربة، احفظ اختيار الزائر في localStorage حتى يبقى في زيارته القادمة.

اختبر نفسك

خمسة أسئلة سريعة، مع الإجابة والشرح بعد كل سؤال.