الدرس 4 من 8
مبدّل السمة
- 14 دقيقة
- 6 معايير للتصحيح
- 3 تلميحات
- إلى المطلوب
هدف الدرس
ثلاث حالات لا اثنتان
01
الشرح
السمة ثلاث حالات لا اثنتان: فاتح وداكن وتابع للنظام. وأكثر المبدّلات تنسى الثالثة، فتحبس المستخدم على اختيار لم يطلبه.
العقد: الألوان كلّها متغيّرات، والافتراضي يتبع prefers-color-scheme، والاختيار الصريح يُكتب في data-theme على الجذر فيتفوّق عليه.
وأضف color-scheme مع كل سمة، ليتبعها المتصفح في الحقول وأشرطة التمرير.
02
المطلوب
زرّ يدور بين الثلاث، يضبط data-theme ويعلن حالته بـ aria-pressed.
معايير التصحيح
6 معايير- يبدأ تابعًا للنظام بلا خاصية
- الضغطة الأولى تختار الفاتح صراحةً
- aria-pressed صار true للاختيار الصريح
- الضغطة الثانية تختار الداكن وتغيّر الألوان فعلًا
- الضغطة الثالثة ترجع إلى النظام
- نصّ الزرّ يعلن الحالة في كل دورة