الألوان المعتمدة على نظام ألوان 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، يشير ذلك إلى أنّ العنصر يتيح استخدام مخطط ألوان داكن.

سنعرّفك على 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);
}

يُرجى العلم أنّه لكي تعمل light-dark() بشكلٍ سليم، عليك تحديد color-scheme. وبما أنّ هذا السمة مكتسَبة، يتم ضبطها عادةً على :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;
  }
}

بفضل 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);
}

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