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

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

Thomas Steiner

الخلفية

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

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

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

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

prefers-color-scheme

color-scheme

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

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

يمكنك إلقاء نظرة فاحصة على ورقة أنماط UA على WebKit ووظيفة هذا الوضع في ما يتعلّق بالوضع الداكن. (ابحث في النص الكامل عن كلمة "داكن" في ورقة الأنماط). يتغيّر الإعداد التلقائي الذي توفّره ورقة الأنماط بناءً على تفعيل الوضع الداكن أو إيقافه. لتوضيح ذلك، في ما يلي إحدى قواعد CSS التي تستخدم الفئة الصورية :matches ومتغيّرات WebKit-internal مثل -apple-system-control-background، بالإضافة إلى توجيه WebKit-internal Preprocessor #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 للنص في محتوى التطبيق أو المستندات. فالمحتوىان مرتبطان معًا ويجب عدم استخدامهما بمعزل عن الآخر.

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

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

سمة color-scheme في CSS

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

تتيح السمة 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

للالتزام بسمة color-scheme في CSS، يجب تنزيل خدمة 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 بشكل عام. على سبيل المثال، يمتلك لون WebKit CSS -webkit-link، المستخدم بواسطة WebKit وChrome للرابط الكلاسيكي الأزرق rgb(0,0,238)، نسبة تباين غير كافية تبلغ 2.23:1 على خلفية سوداء ويفشل كل من WCAG AA ومتطلبات WCAG AAA.

لقد فتحتُ أخطاءً في Chrome وWebKit وFirefox، فضلاً عن مشكلة وصفية في HTML Standard لحلّ هذه المشكلة.

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

قد يبدو التفاعل بين سمة CSS color-scheme والعلامة الوصفية المقابلة مع ميزة الوسائط المفضّلة للمستخدم 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 وAAA مع ألوان الروابط المذكورة في التحذير أعلاه.

شكر وتقدير

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