زر يبدّل الموقع بين الوضع الداكن والفاتح يحتاج الثلاثة معًا: 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 حتى يبقى في زيارته القادمة.