وظيفة light-dark() في CSS

التعريف والاستخدام

وظيفة، CSS light-dark() وظيفة تسمح بتعيين قيم لونيتين، إذا قام المستخدم بتعيين النمط الفاتح، فإنها تعود الأولى، وإذا قام بتعيين النمط المظلم، فإنها تعود الثانية.

للإستخدام light-dark() وظيفة، CSS color-scheme يجب تعيين الخاصية إلى light dark.

إشارة:يمكن للمستخدمين تحديد تفضيلات نمط اللون الخاص بهم من خلال إعدادات النظام (النمط الفاتح أو المظلم) أو إعدادات المتصفح.

مثال

استخدام light-dark() يتم تفعيل وظيفة function light-dark() بثلاثة قيم لونية:

:root {
  color-scheme: light dark;
  --light-bg: snow;
  --light-color: black;
  --dark-bg: black;
  --dark-color: snow;
}
* {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}

جرب بنفسك

نحو CSS

light-dark(lightcolor, darkcolor)

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يعني إصدار المتصفح الذي يدعم هذه الوظيفة بشكل كامل.

الصفحات ذات الصلة

مراجعة:خصائص خطة اللون

مراجعة:دالة var() في CSS

دروس:المعلمات في CSS