المظاهر الملوّنة التي تتضمّن ميزات Baseline CSS

David A. Herron

تاريخ النشر: 11 ديسمبر 2025

لنفترض أنّ لديك موقعًا إلكترونيًا تريد إنشاءه أو إعادة تصميمه. ربما لديك بعض الألوان الأساسية في ذهنك، وتفكر في كيفية تنفيذ مظهر بسرعة استنادًا إلى هذه الألوان.

ستحتاج إلى لونك الأساسي، بالإضافة إلى ألوان للإجراءات وحالات التمرير والأخطاء وألوان لاحتياجات أخرى في واجهة المستخدم. ماذا عن خيارات الوضع الفاتح والداكن؟ فجأةً، ستجد أنّك بحاجة إلى الكثير من الألوان، وقد تشعر بالإرهاق.

والخبر السار هو أنّه عندما يتعلّق الأمر بإنشاء لوحة ألوان مرتبطة برموز الألوان التي تحدّد موقعك الإلكتروني والتبديل بين أوضاع الألوان، يمكن لميزات Baseline أن تتولّى الكثير من العمل الشاق نيابةً عنك. يمكنك استكشاف بعض هذه التقنيات في العرض التوضيحي المميّز، وهو قائمة تشغيل ذات طابع ألوان على موقع Baseline Radio الوهمي.

إنشاء قاعدة باستخدام الألوان النسبية

إذا كانت لديك فكرة عن لون أساسي لمظهرك، يمكنك البدء بسرعة في إنشاء لوحة ألوان لاستخدامها في مظهرك من خلال بعض أساسيات نظرية الألوان وبنية الألوان النسبية في CSS.

لنفترض أنّ لونك الأساسي هو درجة من اللون الأزرق المخضر، ويمكنك أولاً تحديده بتنسيق الألوان المفضّل لديك. بعد ذلك، يمكنك استخدام أي دالة ألوان لإنشاء ألوان جديدة ذات صلة بلونك الأساسي:

html {
  --base-color: oklch(43.7% 0.075 224);
}

يتم إنشاء السمة المخصّصة --base-color باستخدام دالة الألوان oklch(). ‫OkLCh هو الشكل الأسطواني لمساحة ألوان Oklab، ويحدّد قيمًا لثلاث قنوات: L (السطوع) وC (اللون) وH (درجة اللون)، بالإضافة إلى قناة ألفا اختيارية للتحكّم في الشفافية.

يُعدّ تنسيق OkLCh مناسبًا لهذا النوع من معالجة الألوان، لأنّه مصمّم لتوفير تجانس إدراكي. على سبيل المثال، إذا عدّلت درجة اللون فقط، يجب أن يكون للون الناتج درجة سطوع ولون مماثلَين للون الأصلي. ويفيد ذلك على وجه الخصوص في تجنُّب مشاكل التباين غير المتوقّعة.

مع الحفاظ على درجة السطوع والتشبّع نفسيهما من --base-color، يمكنك ضبط درجة اللون بمقدار 120 درجة في كلا الاتجاهين للحصول على لوحة ألوان ثلاثية.

html {
  /* ... */
  --triadic-color-primary: oklch(from var(--base-color) l c calc(h + 120));
  --triadic-color-secondary: oklch(from var(--base-color) l c calc(h - 120));
}

كما هو موضّح هنا، تستخدم بنية الألوان النسبية دالة ألوان تشير إلى لون أساسي (--base-color في هذا المثال) باستخدام الكلمة الرئيسية from، وتعدّل القنوات المعنية بمساحة الألوان استنادًا إلى لون الإخراج المختار، والذي سيكون OkLCh أيضًا في هذه الحالة.

تمنحك النتيجة لونًا ورديًا داكنًا للرمز --accent-color، ودرجة من اللون الذهبي لاستخدامها مع الرمز --highlight-color، وكلاهما يتميزان بدرجة السطوع والصفاء نفسها التي يتميز بها الرمز --base-color الأصلي.

html {
  /* ... */
  --accent-color: var(--triadic-color-primary);
  --highlight-color: var(--triadic-color-secondary);
}

  html {
    /* Input color in the rgb color space*/
    --base-color: teal;

     /* Output color in oklch. Computes to oklch(0.543123 0.0927099 314.769) */
     --triadic-color-primary: oklch(from var(--base-color) l c calc(h + 120));
  }

يضيف اللون التكميلي 180 درجة إلى زاوية درجة اللون.

html {
  /* ... */
  --complement-color: oklch(from var(--base-color) l c calc(h + 180));
  --border-highlight: var(--complement-color);
}

بالنسبة إلى حالة التمرير في واجهة المستخدم، قد تحتاج إلى عرض نسخة أفتح من لون معيّن. وهذا يعني زيادة قيمة قناة السطوع. بالنسبة إلى الحالة النشطة، قد تحتاج إلى إضافة الشفافية من خلال تعديل قناة ألفا، أو تعتيمها من خلال تقليل قيمة قناة السطوع.

html {
  /* Darken the --base-color by 15% */
  --base-color-darkened: oklch(from var(--base-color) calc(l * 0.85) c h);
  /* Assign this color a meaningful variable name */
  --action-color: var(--base-color-darkened);
  /* Lighten the --action-color by 15% */
  --action-color-light: oklch(from var(--action-color) calc(l * 1.15) c h);
  /* Darken the --action-color by 10% */
  --action-color-dark: oklch(from var(--action-color) calc(l * 0.9) c h);
}

في هذا المثال، نستمد --action-color من --base-color، ونستخدمه للأزرار والروابط. يتضمّن --action-color خيارَين، أحدهما أفتح والآخر أغمق، وسيظلان ساريَين حتى إذا تم تغيير --action-color ليكون مرتبطًا بلون آخر مختلف عن --base-color.

يمكنك تعديل القنوات باستخدام دالة رياضية مثل calc() أو استبدال القناة بالكامل بقيمة جديدة. يتم تمثيل القنوات التي لم يتم تغييرها بأحرفها (على سبيل المثال، l لقيمة سطوع لم يتم تغييرها).

دمج الألوان باستخدام color-mix()

بالنسبة إلى خيارات الألوان الأخرى، يمكنك اتّباع أسلوب مماثل وتعديل قنوات أخرى للسمة المخصّصة --base-color. يمكنك أيضًا استخدام color-mix() لإضافة تلميحات من اللون الأساسي إلى جوانب أخرى من تصميمك.

--border-color هو مزيج من اللون الأساسي واللون المسمّى grey، ويتم استيفاؤه في مساحة اللون oklab. عند استخدامها كطريقة لتداخل الألوان، تقدّم هذه الدالة نتائج متشابهة إدراكيًا.

html {
  --base-mix-grey-50: color-mix(in oklab, var(--base-color), grey);
  --border-color: var(--base-mix-grey-50);
}

يكون هذا الإعداد تلقائيًا بنسبة% 50 من كل لون، ولكن يمكنك جعل أحد اللونين أكثر أو أقل بروزًا من خلال ضبط النسبة المئوية لوزنه.

html {
  --background-mix-base-80: color-mix(in oklab,
    var(--background-color) 80%,
    var(--base-color));
  --surface-light: var(--background-mix-base-80);
}

يمكنك بدلاً من إضافة المزيد من الألوان إلى أحد العناصر تعديل قناة صفاء اللون باستخدام بنية الألوان النسبية. يحتوي إطار مربّعات إدخال النص في نموذج الاتصال على إطار أكثر ألوانًا قليلاً عند التركيز عليه.

[data-input*="text"] {
  --focus-ring: transparent;
  /* ... */
  &:focus {
    --focus-ring: oklch(from var(--border-color) l calc(c + 0.1) h);
  }
}

تفعيل الوضعين الفاتح والداكن

بعد الحصول على مجموعة من الألوان التي ستستخدمها، ستحتاج إلى طريقة فعّالة لتطبيق ألوان مختلفة على الوضعين الفاتح والداكن.

إتاحة إشارات المظهر الفاتح والداكن باستخدام السمة color-scheme

يمكنك إخبار المتصفّح على الفور بأنّه يمكن عرض موقعك الإلكتروني في الوضع "الفاتح" أو "الداكن" أو كليهما باستخدام السمة color-scheme. تخبر هذه السمة المتصفّح بنظم الألوان التي يمكن عرض العنصر بها بشكل مريح.

 html {
   color-scheme: light dark;
}

ضبط color-scheme: light dark على العنصر الزائف :root أو العنصر html:

• يُعلم المتصفّح أنّ صفحتك يمكن عرضها في الوضع الفاتح أو الداكن.
• تغيير الألوان التلقائية لواجهة مستخدم المتصفّح لتتطابق مع إعداد نظام التشغيل المعنيّ

لمنح وكلاء المستخدمين إشعارًا مبكرًا بأنّ صفحتك تتوافق مع الوضعين الفاتح والداكن، يمكنك أيضًا الإشارة إلى إمكانية التبديل بين أنظمة الألوان من خلال إضافة عنصر <meta> في <head> من المستند.

<head>
  <!-- ... -->
   <meta name="color-scheme" content="light dark">
</head>

ضبط صيغتَي "فاتح" و "داكن" باستخدام الدالة light-dark()

بصفتك مؤلفًا، قد تكون معتادًا على ضبط ألوان الصفحة باستخدام طلب بحث prefers-color-scheme @media.

@media (prefers-color-scheme: light) {
  html {
    --background-color: oklch(95.5% 0 162);
    --text-color: black;
  }
}

@media (prefers-color-scheme: dark) {
  html {
    --background-color: oklch(22.635% 0.01351 291.83);
    --text-color: white;
  }
}

يعمل هذا بشكل رائع مع الألوان والأنماط التي يتحكّم فيها المؤلف، ولكن كما ذكرنا في القسم السابق، سيظلّ عليك استخدام color-scheme لتعديل ألوان واجهة مستخدم المتصفّح.

إنّ تغيير ألوان الصفحة باستخدام طلب بحث prefers-color-scheme يعني أيضًا تكرار بعض الرموز لأنّه عليك تحديد الألوان لكل وضع على حدة.

مع ضبط color-scheme على الصفحة بأكملها (أو عناصر معيّنة)، يمكنك استخدام الدالة light-dark() لضبط الألوان لكل وضع في سطر واحد من الرمز.

تقبل الدالة لونَين. يتم استخدام الأول عندما يكون نظام الألوان مضبوطًا على "فاتح"، ويتم استخدام الثاني عندما يكون نظام الألوان مضبوطًا على "داكن".

html {
  color-scheme: light dark;
  /* Color custom property values for both light and dark modes */
  --base-color: light-dark(oklch(43.7% 0.075 224), oklch(89.2% 0.069 224));
  --background-color: light-dark(oklch(95.5% 0 162), oklch(22.635% 0.01351 291.83));
  --accent-color: oklch(from var(--base-color) l c calc(h + 120));
  --active-color: light-dark(var(--action-color-light), var(--action-color-dark));
  /* ... */
}

كما هو الحال مع أي سمة مخصّصة، يمكن ضبط إعدادات light-dark() للألوان على مستوى العالم أو ضمن مكوّنات معيّنة، ثم استخدامها في أي مكان آخر حسب الحاجة.

/* custom property usage */
body {
  background-color: var(--background-color);
  /* ... */
}

:any-link {
  /* ... */
  text-decoration-color: var(--accent-color);
}

منح المستخدمين إمكانية التحكّم من خلال أداة تبديل المظاهر المضمّنة

من الرائع أن يتضمّن موقعك الإلكتروني مظهرًا يتوافق مع إعدادات الألوان التلقائية للنظام أو المتصفّح، ولكن يمكنك اتّخاذ خطوة إضافية ومنح زوّار موقعك الإلكتروني إمكانية تجاهل إعدادات الألوان التلقائية هذه.

إذا أنشأت مفتاح تبديل للسمات يعدّل السمة data-scheme في العنصر <html>، يمكنك استخدام السمة نفسها لتغيير color-scheme باستخدام CSS.

html {
  color-scheme: light dark;

  &[data-scheme="light"] {
    color-scheme: light;
  }

  &[data-scheme="dark"] {
    color-scheme: dark;
  }

  &[data-scheme="green"] {
      --base-color-light: oklch(48.052% 0.11875 151.945);
      --base-color-dark: oklch(92.124% 0.13356 151.558);
      color-scheme: light dark;
   }
}

تعرض data-scheme="light" وdata-scheme="dark" الصفحة في وضعَي الألوان الخاصَّين بهما فقط. يمكن عرض data-scheme="green" في أي من الوضعين، كما أنّه يغيّر لون --base-color إلى درجة من اللون الأخضر، ما يمنحك لوحة ألوان جديدة تمامًا لأنّ معظم الألوان الأخرى تستند إلى --base-color.

تسجيل خصائص مخصّصة باستخدام @property

حتى الآن، تم ضبط الألوان في العرض التوضيحي كسمات مخصّصة عادية. يمكنك أيضًا تسجيل خصائص باستخدام القاعدة @property للاستفادة من المزايا التي تأتي مع التحقّق من النوع.

بما أنّ --base-color يُستخدَم كأساس للعديد من الألوان الأخرى في الواجهة، من المفيد التأكّد من أنّه دائمًا لون ويتضمّن قيمة احتياطية.

@property --base-color-light {
  syntax: '<color>';
  inherits: false;
  initial-value: oklch(43.7% 0.075 224);
}

@property --base-color-dark {
  syntax: '<color>';
  inherits: false;
  initial-value: oklch(89.2% 0.069 224);
}

html {
  --base-color: light-dark(var(--base-color-light), var(--base-color-dark));
}

بهذه الطريقة، إذا تم تغيير --base-color عن طريق الخطأ إلى قيمة غير صالحة، سيتم دائمًا الرجوع إلى initial-value الذي تم ضبطه باستخدام قاعدة @property.

يتيح تسجيل خصائص معيّنة بهذه الطريقة أيضًا تحريك الألوان بسلاسة في linear-gradient().

.main-heading {
  background: linear-gradient(in oklch 90deg, var(--text-color) 50%, oklch(from var(--base-color) l c var(--header-hue)));
  background-clip: text;
  color: transparent;
  animation: header-hue-switch 5s ease-in-out infinite alternate;
}

يحتوي العنصر .main-heading على خلفية linear-gradient() تظهر من خلال النص الشفاف باستخدام السمة background-clip.

يعرض جزء من النص hue الذي يستخدم بنية الألوان النسبية، ويتحرّك من قيمة قناة 26.67 إلى 277:

@keyframes header-hue-switch {
  from {
    --header-hue: 26.67;
  }

  to {
    --header-hue: 277;
  }
}

باستخدام السمة المخصّصة --header-hue المسجّلة، يمكن أن تحدث هذه الحركة بسلاسة لأنّ المتصفّح يعرف أنّ هذه السمة المخصّصة هي رقم.

@property --header-hue {
  syntax: '<number>';
  inherits: false;
  initial-value: 100;
}

في حال عدم تسجيل خاصية مخصّصة، لن يعرف المتصفّح نوع بيانات --header-hue، وبالتالي سيكون الانتقال إلى رقم صورة متحركة منفصلة، ما سيؤدي إلى الانتقال بين الحالات بدون استيفاء تدريجي.

الخاتمة

يمكن أن تساعدك أدوات Baseline الجديدة في إنشاء لوحة ألوان قابلة للتعديل بسرعة وجعل عملية إنشاء متغيرات الألوان أكثر كفاءة. ومع ذلك، سيظل عليك اختيار خيارات الألوان والتركيبات بنفسك.

يمنحك إنشاء لوحة الألوان بشكل ديناميكي بهذه الطريقة المرونة. إذا كنت بحاجة إلى تغيير اللون الأساسي الخاص بالعلامة التجارية، يمكنك تعديل --base-color فقط، وسيتم تعديل بقية المظهر وفقًا لذلك. أو إذا أضفت إمكانات تشغيل الموسيقى، يمكنك أن تقرّر تغيير اللون الأساسي بشكل ديناميكي ليتناسب مع الأغنية التي يتم تشغيلها حاليًا.

الساعات المعتمَدة

تم اقتباس منطق أداة تبديل المظهر من مكوّن تبديل المظهر الذي صمّمه Adam Argyle.