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

مكتملة: أصبحت ميزة الويب هذه متاحة الآن في جميع محرّكات المتصفّحات الرئيسية الثلاثة، وأصبحت متاحة حديثًا في Baseline اعتبارًا من 13 مايو 2024.

يمكن لألوان النظام التفاعل مع قيمة 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. عند التغيير، تتغيّر ألوان الصفحة عند الانتقال من الوضع الفاتح إلى الداكن أو العكس، على الرغم من أنّ التعريفات في عنصر body تظلّ كما هي.

لنرحّب معًا بـ light-dark()

Browser Support

• 123
• 123
• 120
• 17.5

Source

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