CSS Academy · درس

خاصية color-scheme

استخدم خاصية color-scheme لإعلام المتصفح بالسمات التي يدعمها العنصر.

خاصية color-scheme درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ما المقصود بـ color-scheme؟

تُخبر الخاصية color-scheme المتصفح بأنظمة الألوان التي يدعمها عنصر ما، أو تدعمها الصفحة. ثم يستخدم المتصفح هذه المعلومات لتنسيق عناصر واجهته الخاصة، مثل أشرطة التمرير وعناصر النماذج ومربعات الاختيار وحدود حقول الإدخال، بما يتوافق مع النظام المطلوب.

قيم color-scheme

القيم المقبولة:

normal: يستخدم العنصر الإعداد الافتراضي للمستند
light: يدعم العنصر النظام الفاتح فقط
dark: يدعم العنصر النظام الداكن فقط
light dark: يدعم النظامين، ويختار المتصفح بناءً على التفضيل
dark light: يفضّل النظام الداكن، ويعود إلى الفاتح عند الحاجة

عناصر واجهة المتصفح

ينسّق المتصفح العناصر التالية تلقائيًا وفقًا لـ color-scheme:

أشرطة التمرير
حقول الإدخال ومناطق النص والقوائم المنسدلة للاختيار
مربعات الاختيار وأزرار الاختيار
أشرطة التمرير ذات النطاق
أدوات اختيار التاريخ والوقت

التعيين على عنصر html

يؤدي تعيين color-scheme على العنصر الجذري إلى تغيير طريقة عرض واجهة النظام في الصفحة بأكملها:

<input type="checkbox" /> <select><option>A</option><option>B</option></select>

مكافئ وسم meta

يمكنكم أيضًا تعريف color-scheme في HTML باعتباره وسم meta ليُطبّق في وقت مبكر، قبل تحميل CSS:

<pre class="code-sample">&lt;meta name="color-scheme" content="light dark"&gt;</pre>

الوضع الداكن من دون ألوان مخصّصة

وضع داكن بسيط: عيّنوا color-scheme: dark واتركوا للمتصفح مهمة التعامل تلقائيًا مع عناصر النماذج وأشرطة التمرير:

<p>Native form controls and page background adapt to dark automatically.</p>
<input type="text" placeholder="Native input" />

الدمج مع prefers-color-scheme

استخدموا prefers-color-scheme لاكتشاف التفضيل، ثم عيّنوا الرموز المميزة المخصّصة لديكم وخاصية color-scheme معًا:

<div class="demo">Themed via variables + color-scheme</div>

تحديد نطاق color-scheme

طبّقوا color-scheme على عناصر محددة لإنشاء مساحات فاتحة معزولة داخل صفحة داكنة:

<div class="light-widget">Always-light widget<br/><input type="date" /></div>

الألوان الإجباريّة / التباين العالي في Windows

يكتشف استعلام الوسائط forced-colors وضع التباين العالي في Windows. استخدموا color-scheme وforced-colors معًا لتوفير دعم شامل لإمكانية الوصول.

<div class="card">Card respects forced-colors mode</div>

الكلمات المفتاحية لألوان النظام

عند تفعيل forced-colors، استخدموا الكلمات المفتاحية لألوان نظام CSS التي تُطابق لوحة الألوان الميسّرة للمستخدم:

<button>System-styled button</button>

تحقّق سريع

ما سلوك CSS الذي يتيحه تعيين color-scheme: dark على عنصر html؟

مراجعة

توجّه color-scheme المتصفح إلى كيفية تنسيق عناصر تحكم واجهته الخاصة لعنصر أو صفحة. استخدموا color-scheme: light dark على المستوى العام لتمكين التكيّف التلقائي لواجهة المستخدم الأصلية. ادمجوه مع الخصائص المخصّصة في CSS لتنفيذ الوضع الداكن بالكامل. استخدموا وسم meta للتطبيق المبكر قبل تحميل CSS.

الأسئلة الشائعة

هل درس «خاصية color-scheme» مجاني؟

نعم — نص درس «خاصية color-scheme» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «خاصية color-scheme»؟

استخدم خاصية color-scheme لإعلام المتصفح بالسمات التي يدعمها العنصر. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «خاصية color-scheme»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy