تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

الألوان المعتمدة على نظام ألوان CSS باستخدام light-dark()

يمكن للألوان في النظام الاستجابة لقيمة color-scheme المستخدَمة حاليًا. تعرض الدالة light-dark() الإمكانية نفسها للمؤلفين.

Bramus

ألوان النظام في CSS

في CSS، يمكنك استخدام العديد من الألوان من إحدى مساحات الألوان العديدة. على سبيل المثال، يمكنك استخدام ألوان مُسمّاة وألوان سداسية عشرية ودوالّ ألوان مرتبطة بمساحة ألوان معيّنة، والدالة color() الأكثر عمومية.

على سبيل المثال، يمكن أيضًا تمثيل اللون المُعنوَن cornflowerblue على النحو التالي: #6495ED أو hsl(218.54deg 79.19% 66.08%) أو color(display-p3 0.43 0.58 0.9).

بالإضافة إلى هذه الأسماء والتنسيقات المختلفة، تتضمّن CSS ألوانًا تُوصف بأنّها ألوان النظام، وهي محدّدة في المستوى 4 من وحدة ألوان CSS. ألوان النظام هذه هي ألوان يحدّدها المتصفّح ويتم تمثيلها بكلمة رئيسية.

على سبيل المثال، يمثّل لون النظام Canvas، والذي يجب عدم الخلط بينه وبين العنصر <canvas>، "خلفية محتوى التطبيق أو المستندات". ويمكن استخدامها بشكل جيد مع CanvasText الذي يمثّل "النص في محتوى التطبيق أو المستندات"، وهو يُستخدَم أيضًا في استخدامه جنبًا إلى جنب.

في CSS، يتم استخدامها على النحو التالي:

body {
  color: CanvasText;
  background-color: Canvas;
}

بشكل تلقائي، يعرض CanvasText لونًا قريبًا من black ويكون Canvas لونًا قريبًا من white. ويعتمد التنفيذ الفعلي على المتصفّح. على سبيل المثال، يؤدي استخدام الرمز CanvasText في Chrome إلى ظهور الرمز #121212، في حين أنّه يظهر في Safari باللون الأفتح قليلاً #1e1e1e.

تتمثل إحدى فوائد ألوان النظام هذه في أنّها يمكنها الاستجابة للقيمة المحسوبة للسمة color-scheme. على سبيل المثال، يتم تبديل قيم CanvasText وCanvas عندما يكون color-scheme المستخدَم هو dark.

:root {
  color-scheme: dark;
}

body {
  color: CanvasText;
  background-color: Canvas;
}

في العرض التقديمي التالي، يمكنك تغيير قيمة color-scheme التي تم ضبطها على :root والاطّلاع على كيفية استجابة الصفحة.

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

صفحة تتيح لك تغيير قيمة color-scheme عند إجراء التغيير، تتغيّر ألوان الصفحة عند الانتقال من ألوان فاتحة إلى ألوان داكنة أو العكس، على الرغم من أنّ البيانات في عنصر الجسم تظلّ كما هي.

سنعرّفك على `light-dark()`

توافق المتصفّح

المصدر

حتى الآن، كان التفاعل مع قيمة color-scheme المستخدَمة كان محجوزًا لألوان النظام. بفضل light-dark()، المحدّد في المستوى 5 من وحدة ألوان CSS، يمكنك الآن أيضًا استخدام هذه الميزة.

light-dark() هي دالة تقبل وسيطتَين، ويجب أن تكونا <color>. ويتم اختيار أحدهما اعتمادًا على نظام الألوان المستخدم.

إذا كان مخطط الألوان المستخدَم هو light أو غير معروف، يتم عرض القيمة المحسوبة للقيمة الأولى.
إذا كان نظام الألوان المستخدَم هو dark، يتم عرض القيمة المحسوبة للّون الثاني.

نتيجة light-dark() هي <color>. ويمكن استخدامها في CSS في أي مكان يتم فيه قبول <color>. على سبيل المثال، في السمتَين color وbackground-color، ولكن أيضًا في دالة مثل linear-gradient().

في المثال التالي، لون الخلفية المستخدَم هو #333 في الوضع الداكن، أو #ccc في الوضع الفاتح (أو في وضع غير معروف).

:root {
  color-scheme: light dark;
}

body {
  background-color: light-dark(#ccc, #333);
}

يُرجى العِلم أنّه يجب تحديد color-scheme لكي يعمل light-dark() بشكل صحيح. وبما أنّ هذا السمة مكتسَبة، يتم ضبطها عادةً على :root، ولكن يمكنك اختيار ضبطها على عنصر معيّن إذا أردت.

التطبيق العملي

في المثال التالي، تمثّل بعض الخصائص المخصّصة الألوان على الصفحة. لتلبية متطلبات الوضع الداكن، يتم استبدال قيم هذه السمات المخصّصة بقيمة مختلفة في حالة prefers-color-scheme الوسائط.

:root {
  --primary-color: #333;
  --primary-background: #e4e4e4;
  --highlight-color: hotpink;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #fafafa;
    --primary-background: #121212;
    --highlight-color: lime;
  }
}

صفحة تستجيب للوضع الفاتح أو الداكن من خلال prefers-color-scheme.
يتم تغيير قيم الألوان في CSS باستخدام الاستعلام عن الوسائط.

بفضل light-dark()، يمكن تبسيط هذا الرمز. بما أنّه تم ضبط color-scheme على light dark في :root، تتغير قيم هذه الألوان تلقائيًا عند تغيير نظام التشغيل من الوضع الفاتح إلى الوضع الداكن والعكس.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

صفحة تستجيب للوضع الفاتح أو الداكن باستخدام prefers-color-scheme.
يتم تغيير قيم الألوان باستخدام light-dark().

كمكافأة إضافية، يمكن فرض استخدام شجرة فرعية معيّنة في نموذج العناصر في المستند (DOM) فقط على استخدام الوضع الفاتح أو الوضع الداكن من خلال ضبط color-scheme على dark أو light. في المثال التالي، يتم تطبيق ذلك على :root.

صفحة تستجيب للوضع الفاتح أو الداكن باستخدام prefers-color-scheme.
يتم تغيير قيم الألوان باستخدام light-dark().
يمكنك فرض الوضع الفاتح أو الداكن باستخدام أحد الخيارَين. ويمكن تحقيق ذلك من خلال التلاعب بقيمة color-scheme.

الألوان المعتمدة على نظام ألوان CSS باستخدام light-dark()

ألوان النظام في CSS

سنعرّفك على light-dark()

التطبيق العملي

سنعرّفك على `light-dark()`