الألوان المعتمدة على نظام ألوان 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.