خاصية color-scheme
آخر تحديث: 2026-09-13
color-scheme خاصية color-scheme
تُخبر الخاصية color-scheme المتصفح بأنظمة الألوان (فاتح/داكن) التي يدعمها العنصر، مما يتيح للمتصفح اختيار ألوان افتراضية مناسبة لعرض عناصر التحكم الأصلية في العنصر مثل أشرطة التمرير وعناصر النموذج. وهي خاصية مهمة للتكيف مع الوضع الداكن.
| الفئة | |
|---|---|
| القيمة الأولية | normal |
| موروث | نعم |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
color-scheme: normal | [ light | dark | <custom-ident> ]+ && only?;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
normal | light | dark | only | كلمة مفتاحية | أنظمة الألوان المدعومة |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| color-scheme | ✓ v79 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يؤدي ضبط color-scheme: dark على <html> أو <body> إلى جعل المتصفح يعرض العناصر الأصلية مثل أشرطة التمرير وعناصر التحكم في النموذج بأنماط داكنة تلقائيًا.
تلميح： تعني only أن العنصر يدعم فقط نظام الألوان المذكور ويمنع المتصفح من التبديل تلقائيًا؛ أما الجمع بين light dark فيعني أن كليهما مدعوم.
❓ الأسئلة الشائعة
Qما الفرق بين color-scheme و prefers-color-scheme؟
Aprefers-color-scheme استعلام وسائط يكتشف تفضيل النظام (فاتح/داكن) للمستخدم ويقرر أي ورقة أنماط يُحمَّل. أما color-scheme فتُخبر المتصفح بأنظمة الألوان التي تدعمها الصفحة أو العنصر، لكي يختار ألوانًا افتراضية لعناصر التحكم الأصلية مثل أشرطة التمرير والنماذج. وعمليًا يعملان معًا: تُنمِّق استعلام الوسائط ألوانك المخصصة، وتُبقي color-scheme عناصر التحكم الأصلية متزامنة.
Qهل يُعرض العنصر باللون الداكن تلقائيًا بعد ضبط color-scheme؟
Aلا — فهو لا يغير الألوان التي كتبتها بنفسك؛ بل يؤثر فقط على العرض الافتراضي للمتصفح لواجهة المستخدم الأصلية مثل أشرطة التمرير، وحقول الإدخال، والقوائم المنسدلة، والعناصر النائبة. ولا يزال يتعين ضبط الخلفيات والنصوص والألوان المخصصة الأخرى يدويًا. على سبيل المثال، html { color-scheme: dark; background: #111; color: #eee; } هو ما يعرض صفحة داكنة بالكامل.
Qكيف أستخدم الكلمة المفتاحية only لخاصية color-scheme في CSS؟
Aتعني only أنه يدعم فقط أنظمة الألوان المذكورة، دون تبديل تلقائي. فمثلًا، color-scheme: only dark تُجبر عناصر التحكم الأصلية على العرض الداكن دائمًا، حتى عندما يكون النظام في الوضع الفاتح. ويعني color-scheme: light dark أنه يدعم كليهما ويتبع النظام. وتناسب only الصفحات ذات العلامة التجارية وصفحات إنشاء المحتوى. أما القيمة الافتراضية normal فتتبع وكيل المستخدم وإعدادات النظام.
Qما الفرق بين color-scheme ووسم meta theme-color؟
Atheme-color وسوم meta في HTML تتحكم في لون واجهة المتصفح — شريط العنوان على الجوال ولون سمة النافذة. أما color-scheme فهي خاصية CSS تتحكم في العرض الفاتح/الداكن لعناصر التحكم الأصلية داخل الصفحة. وتستهدف كل منهما طبقة مختلفة: تدير إحداهما هيكل المتصفح، وتدير الأخرى محتوى الصفحة. وعند إنشاء الوضع الداكن يمكنك ضبط كلتيهما للحصول على مظهر متّسق من الداخل والخارج.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
