تم تحسين النمط التلقائي للوضع الداكن من خلال خاصية CSS لنظام الألوان والعلامة الوصفية المقابلة لها.

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

Thomas Steiner

الخلفية

ميزة prefers-color-scheme "الإعدادات المفضّلة للمستخدم" في الوسائط

تتيح ميزة prefers-color-scheme "الوسائط المفضّلة للمستخدم" للمطوّرين التحكّم الكامل في مظهر صفحاتهم. إذا لم تكن على دراية بهذا الوضع، يُرجى قراءة مقالتي بعنوان prefers-color-scheme: مرحبًا يا عتمة، يا صديقي القديم، حيث سجّلت كل ما أعرفه عن إنشاء تجارب رائعة في الوضع الداكن.

إنّ إحدى قطع اللغز التي لم تتم الإشارة إليها إلا بشكل موجز في المقالة هي سمة CSS‏ color-scheme والعلامة الوصفية المقابلة لها التي تحمل الاسم نفسه. يسهّل كل منهما عملك كمطوّر، من خلال السماح لك بتفعيل الإعدادات التلقائية الخاصة بالموضوع في جدول تصفّح وكيل المستخدم، مثل عناصر التحكّم في النماذج وأشرطة التمرير وألوان نظام CSS. وفي الوقت نفسه، تمنع هذه الميزة المتصفّحات من تطبيق أي عمليات تحويل بمفردها.

دعم المتصفح

prefers-color-scheme

color-scheme

ورقة أنماط وكيل المستخدم

قبل المتابعة، دعني أصف لك بإيجاز ما هي ورقة أنماط وكيل المستخدم. في معظم الأحيان، يمكنك اعتبار كلمة وكيل المستخدم (UA) طريقة أنيقة للتعبير عن المتصفّح. تحدِّد ملفّ أسلوب التنسيق في Universal Analytics المظهر والأسلوب التلقائيَين للصفحة. كما يوحي الاسم، ملفّ أسلوب Universal Analytics هو ملفّ يعتمد على Universal Analytics المعنيّ. يمكنك الاطّلاع على جدول التنسيق لوحدة معالجة الرسومات (UA) في Chrome (وChromium) ومقارنته بجدول التنسيق في Firefox أو Safari (وWebKit). تتطابق عادةً أوراق أسلوب Universal Analytics في معظم العناصر. على سبيل المثال، تُظهر جميعها الروابط باللون الأزرق والنص العام باللون الأسود وخلفية بيضاء، ولكن هناك أيضًا اختلافات مهمة (ومزعجة أحيانًا)، مثل كيفية تصميم عناصر التحكّم في النماذج.

اطّلِع على مزيد من التفاصيل حول ملفّ أسلوب Universal Analytics في WebKit ووظيفته في ما يتعلّق بالوضع الداكن. (ابحث عن النص الكامل "داكن" في ملف تنسيق الصفحات). يتغيّر الإعداد التلقائي الذي تقدّمه ملفّات الأنماط استنادًا إلى ما إذا كان الوضع الداكن مفعّلاً أم لا. لشرح ذلك، إليك إحدى قواعد CSS هذه باستخدام الدرجة السطحية :matches والمتغيّرات الداخلية في WebKit مثل -apple-system-control-background، بالإضافة إلى توجيه المعالج المتقدّم الداخلي في WebKit #if defined:

input,
input:matches([type="password"], [type="search"]) {
  -webkit-appearance: textfield;
  #if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
      HAVE_OS_DARK_MODE_SUPPORT
    color: text;
    background-color: -apple-system-control-background;
  #else
    background-color: white;
  #endif
  /* snip */
}

ستلاحظ بعض القيم غير العادية للسمتَين color وbackground-color أعلاه. لا يُعدّ text أو -apple-system-control-background لونَين صالحَين في CSS. وهي ألوان دلالية داخلية في WebKit.

تبيّن أنّ CSS تتضمّن ألوانًا معيارية للنظام الدلالي. ويتم تحديدها في مستوى 4 من وحدة ألوان CSS. على سبيل المثال، علامة Canvas (يجب عدم الخلط بينها وبين علامة <canvas>) هي لخلفية محتوى التطبيق أو المستندات، في حين أنّ علامة CanvasText هي للنص في محتوى التطبيق أو المستندات. يرتبط الاثنان ببعضهما ولا يجب استخدامهما بشكل منفصل.

يمكن أن تستخدِم أوراق أنماط Universal Analytics إما الألوان الخاصة بها أو ألوان نظام الدلالات المُعَدَّلة، لتحديد كيفية عرض عناصر HTML تلقائيًا. إذا تم ضبط نظام التشغيل على الوضع الداكن أو كان يستخدم مظهرًا داكنًا، سيتم ضبط CanvasText (أو text) بشكل مشروط على اللون الأبيض، وسيتم ضبط Canvas (أو -apple-system-control-background) على اللون الأسود. بعد ذلك، تحدّد ملفّات أسلوب الصفحات في Universal Analytics ملفّ CSS التالي مرّة واحدة فقط، وتغطّي كلّ من الوضع الفاتح والوضع الداكن.

/**
  Not actual UA stylesheet code.
  For illustrative purposes only.
*/
body {
  color: CanvasText;
  background-color: Canvas
}

سمة color-scheme في CSS

تقدّم مواصفة CSS Color Adjustment Module Level 1 نموذجًا وعناصر تحكّم في تعديل الألوان التلقائي من خلال وكيل المستخدم بغرض معالجة الإعدادات المفضّلة للمستخدمين، مثل الوضع الداكن أو تعديل التباين أو أنظمة الألوان المطلوبة المحدّدة.

تسمح السمة color-scheme المحدّدة فيها للعنصر بالإشارة إلى مخططات الألوان التي يمكن عرضها معه. يتم التفاوض على هذه القيم مع الإعدادات المفضّلة للمستخدم، ما يؤدي إلى اختيار مخطط ألوان يؤثر في عناصر واجهة المستخدم (UI)، مثل الألوان التلقائية لأداة التحكّم في النموذج وأشرطة التمرير، بالإضافة إلى القيم المستخدَمة لألوان نظام CSS. في ما يلي القيم المسموح بها حاليًا:

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

• [ light | dark ]+ يشير إلى أنّ العنصر على دراية بأنظمة الألوان المدرَجة ويمكنه التعامل معها، ويعبّر عن ترتيب مفضّل بينها.

في هذه القائمة، يمثّل light نظام ألوان فاتحًا، بألوان خلفية فاتحة وألوان واجهة داكنة، في حين يمثّل dark العكس، بألوان خلفية داكنة وألوان واجهة فاتحة.

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

في عنصر :root، يجب أن يؤثّر التقديم باستخدام مخطّط ألوان أيضًا في لون سطح لوحة الرسم (أي لون الخلفية الشاملة)، والقيمة الأولية للسمة color والقيم المستخدَمة لألوان النظام، ويجب أن يؤثّر أيضًا في أشرطة التمرير لمساحة العرض.

/*
  The page supports both dark and light color schemes,
  and the page author prefers dark.
*/
:root {
  color-scheme: dark light;
}

العلامة الوصفية color-scheme

إنّ الالتزام بسمة CSS‏ color-scheme يتطلّب تنزيل CSS أولاً (إذا تمت الإشارة إليها من خلال <link rel="stylesheet">) وتحليلها. لمساعدة وكلاء المستخدمين في عرض خلفية الصفحة باستخدام مخطط الألوان المطلوب على الفور، يمكن أيضًا تقديم قيمة color-scheme في عنصر <meta name="color-scheme">.

<!--
  The page supports both dark and light color schemes,
  and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">

دمج color-scheme وprefers-color-scheme

بما أنّ كلّ من العلامة الوصفية وخاصيّة CSS (في حال تطبيقها على العنصر :root) يؤديان في النهاية إلى السلوك نفسه، أنصح دائمًا بتحديد مخطّط الألوان من خلال العلامة الوصفية، حتى يتمكّن المتصفّح من استخدام المخطّط المفضّل بشكل أسرع.

في حين أنّه لا يلزم استخدام قواعد CSS إضافية للصفحات الأساسية المطلقة، يجب في الحالة العامة دائمًا دمج color-scheme مع prefers-color-scheme. على سبيل المثال، لون CSS المملوك -webkit-link الذي يستخدمه WebKit وChrome للرابط الأزرق الكلاسيكي rgb(0,0,238)، يملك نسبة تباين غير كافية تبلغ 2.23:1 على خلفية سوداء، ولا يستوفي متطلبات كل من إرشادات إتاحة المحتوى على الويب (WCAG) من الفئة AA والفئة AAA.

لقد أبلغت عن أخطاء في Chrome و WebKit و Firefox بالإضافة إلى مشكلة في العنصر meta في معيار HTML لحلّ هذه المشكلة.

التفاعل مع prefers-color-scheme

قد يبدو التفاعل بين color-scheme سمة CSS والعلامة الوصفية المقابلة مع prefers-color-scheme ميزة "إعدادات المستخدِم المفضّلة" في الوسائط مربكًا في البداية. في الواقع، يلعبان معًا بشكل جيد. من المهم معرفة أنّ color-scheme يحدّد المظهر التلقائي حصريًا، بينما يحدّد prefers-color-scheme المظهر القابل للتنسيق. لتوضيح ذلك، نفترض أنّ الصفحة التالية:

<head>
  <meta name="color-scheme" content="dark light">
  <style>
    fieldset {
      background-color: gainsboro;
    }
    @media (prefers-color-scheme: dark) {
      fieldset {
        background-color: darkslategray;
      }
    }
  </style>
</head>
<body>
  <p>
    Lorem ipsum dolor sit amet, legere ancillae ne vis.
  </p>
  <form>
    <fieldset>
      <legend>Lorem ipsum</legend>
      <button type="button">Lorem ipsum</button>
    </fieldset>
  </form>
</body>

يضبط رمز CSS المضمّن في الصفحةbackground-color عنصر <fieldset> على gainsboro بشكل عام، وعلى darkslategray إذا كان المستخدم يفضّل مخطط ألوان dark وفقًا لميزة prefers-color-scheme تنسيقات الوسائط المفضّلة للمستخدم.

من خلال العنصر <meta name="color-scheme" content="dark light">، تخبر الصفحة المتصفّح أنّها تتيح المظهر الداكن والفاتح، مع تفضيل المظهر الداكن.

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

لاحظ كيف يتغيّر background-color عنصر <fieldset> استنادًا إلى ما إذا كان الوضع الداكن مفعّلاً، وذلك باتّباع القواعد في جدول الأنماط المضمّن الذي يوفّره المطوّر على الصفحة. إما gainsboro أو darkslategray.

يتم التحكّم في مظهر العنصر <button> من خلال جدول التنسيق الخاص بوكيل المستخدم. تم ضبط color على ButtonText لون النظام، وتم ضبط background-color وborder-color الأربعة على لون النظام ButtonFace.

لاحظ الآن كيف يتغيّر border-color عنصر <button>. تتغيّر القيمة المحسوبة لكل من border-top-color وborder-bottom-color من rgba(0, 0, 0, 0.847) (أسود) إلى rgba(255, 255, 255, 0.847) (أبيض)، لأنّ وكيل المستخدم يعدّل ButtonFace ديناميكيًا استنادًا إلى نظام الألوان. وينطبق الأمر نفسه على color عنصر <button> الذي تم ضبطه على لون النظام ButtonText المقابل.

عرض توضيحي

يمكنك الاطّلاع على تأثيرات color-scheme المطبَّقة على عدد كبير من عناصر HTML في العرض التجريبي على Glitch. يعرض الإصدار التجريبي عمدًاانتهاك إرشادات WCAG AA وWCAG AAA باستخدام ألوان الروابط المذكورة في التحذير أعلاه.

شكر وتقدير

نفّذ Rune Lillesveen سمة CSS color-scheme والعلامة الوصفية المقابلة. "رون" هو أيضًا محرِّر مشارك لمواصفات المستوى 1 من "وحدة تعديل الألوان" في CSS. الصورة الرئيسية من إنشاء Philippe Leone على Unsplash.