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

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

• 123
• x
• 120
• x

المصدر

حتى الآن، كان التفاعل مع قيمة 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;
  }
}

صفحة تستجيب للوضع الفاتح أو الداكن من خلال 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.