CSS Academy · درس

استعلام الوسائط prefers-color-scheme

اكتشف تفضيل وضع النظام الداكن أو الفاتح لدى المستخدم باستخدام استعلام الوسائط prefers-color-scheme.

الدرس 1 من 413 خطوة

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

لماذا الوضع الداكن التلقائي؟

يفعّل كثير من المستخدمين الوضع الداكن على مستوى نظام التشغيل للراحة أو لإطالة عمر البطارية (في شاشات OLED) أو لأسباب تتعلق بإمكانية الوصول. يكتشف استعلام الوسائط prefers-color-scheme هذا التفضيل، ويتيح لموقعك التكيّف تلقائيًا.

قيم الاستعلام

هناك قيمتان:

light — يفضّل المستخدم نظام ألوان فاتحًا (أو لم يحدد تفضيلًا)
dark — يفضّل المستخدم الوضع الداكن

<p>This page respects your OS dark mode setting.</p>

الوضع الداكن أولًا للجوّال

إذا كان معظم مستخدميكم يستعملون أجهزة جوّال بشاشات OLED، ففكّروا في جعل الوضع الداكن هو النمط الأساسي:

<p>Dark by default; switches to light in light mode.</p>

نهج متغيرات CSS

أنظف طريقة للتنفيذ هي تعريف مجموعة رموز مميزة لكل نظام ألوان:

<div class="card">Themed card using CSS variables</div>

الصور في الوضع الداكن

خفّضوا سطوع الصور في الوضع الداكن لتجنّب الصور الساطعة المزعجة:

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='200' height='120' fill='%23ff6347'/></svg>" alt="demo" />

اكتشاف الوضع في JavaScript

تحقّقوا من تفضيل الوضع الداكن في JavaScript لتنفيذ سلوك ديناميكي:

<p id="theme-status">Checking...</p>
<script>
  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  document.getElementById('theme-status').textContent = isDark ? 'System is in DARK mode' : 'System is in LIGHT mode';
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    document.getElementById('theme-status').textContent = e.matches ? 'System is in DARK mode' : 'System is in LIGHT mode';
  });
</script>

الاختبار في DevTools

في Chrome DevTools ← علامة التبويب Rendering ← حاكوا CSS prefers-color-scheme. بدّلوا بين الوضعين الفاتح والداكن من دون تغيير إعدادات نظام التشغيل. في Firefox: DevTools ← علامة التبويب Inspector ← قائمة رمز العين.

مبادئ ألوان الوضع الداكن

لإنشاء وضع داكن فعّال:

استخدموا الرمادي الداكن، وليس الأسود الخالص، للخلفيات — فهذا يقلّل إجهاد العين
خفّفوا ظلال الارتفاع — واستخدموا درجات خلفية أفتح للأسطح الأعلى
عدّلوا ألوان الحدود لتكون أفتح وأكثر وضوحًا
تحقّقوا من نسب تباين النص — فقد تكون هناك حاجة إلى نسب مختلفة

النمط المضاد لعكس الألوان

لا تعكسوا جميع الألوان ببساطة باستخدام filter: invert(1) لإنشاء الوضع الداكن. ستظهر الصور والأيقونات بألوان غريبة. استخدموا رموزًا مميزة مناسبة للوضع الداكن، مع ألوان ملائمة لكل عنصر.

الأداء: تجنّب الوميض

إذا استخدمتم تبديل السمات الذي تديره JavaScript، فامنعوا وميض السمة غير المنسّقة (FOUT) بتطبيق فئة السمة على <html> بشكل متزامن داخل وسم <script> في <head> قبل عرض الصفحة.

لون السمة الوصفية

حدّثوا لون واجهة المتصفح (شريط العنوان على الجوّال ومبدّل المهام) ليتوافق مع السمة الداكنة:

<pre class="code-sample">&lt;meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff"&gt;
&lt;meta name="theme-color" media="(prefers-color-scheme: dark)"  content="#1a1a2e"&gt;</pre>

تحقّق سريع

ما قيمة استعلام الوسائط التي ينبغي استخدامها لتطبيق أنماط الوضع الداكن عندما يكون نظام التشغيل مضبوطًا على الوضع الداكن؟

أجب عليها في الدرس التفاعلي

مراجعة

يكشف prefers-color-scheme: dark عن تفضيل نظام التشغيل للوضع الداكن. نفّذوا الوضع الداكن التلقائي باستخدام متغيرات CSS التي تبدّل قيم الرموز المميزة داخل استعلام الوسائط. خفّضوا سطوع الصور في الوضع الداكن. اختبروا التنفيذ في DevTools. حدّثوا وسم meta الخاص بـ theme-color للمتصفح للحصول على تجربة جوّال متكاملة.

البدء مجانًا

تعلم CSS مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 40
الدروس: 159

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «استعلام الوسائط prefers-color-scheme» مجاني؟

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

ماذا ستتعلم في «استعلام الوسائط prefers-color-scheme»؟

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

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

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

كم من الوقت يستغرق درس «استعلام الوسائط prefers-color-scheme»؟

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

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

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

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

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