Preferred-color-scheme: مرحبًا يا صديقي الظلام يا صديقي القديم

هل هي مبالغ فيها أم ضرورية؟ تعرَّف على كل ما يخصّ "الوضع الداكن" وكيفية توفيره للمستخدمين.

Thomas Steiner

مقدمة

الوضع الداكن قبل الوضع الداكن

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

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

من هنا بدأت صيحة التصميم الأسود على الأبيض، وانتقلت هذه الصيحة إلى الويب المبني على المستندات. كان أول متصفّح على الإطلاق، WorldWideWeb (تذكَّر أنّ CSS لم يكن قد تم اختراعه بعد)، يعرض صفحات الويب بهذه الطريقة. معلومة مفيدة: كان ثاني متصفّح على الإطلاق، وهو Line Mode Browser، متصفّح يستند إلى المحطة الطرفية، يعرض النص باللون الأخضر على خلفية داكنة. في الوقت الحالي، يتم عادةً تصميم صفحات الويب وتطبيقات الويب باستخدام نص داكن على خلفية فاتحة، وهو افتراض أساسي مبرمَج أيضًا في أوراق أنماط وكيل المستخدم، بما في ذلك Chrome.

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

أسباب استخدام الوضع الداكن

الوضع الداكن لأسباب جمالية

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

الوضع الداكن كأداة لتسهيل الاستخدام

هناك أيضًا أشخاص يحتاجون إلى استخدام الوضع الداكن كأداة أخرى من أدوات تسهيل الاستخدام، مثل المستخدمين الذين يعانون من ضعف في النظر. أقدم أداة تسهيل استخدام من هذا النوع عثرتُ عليها هي ميزة CloseView في نظام التشغيل System 7، والتي كانت تتضمّن خيارًا للتبديل بين الأسود على الأبيض والأبيض على الأسود. على الرغم من أنّ نظام التشغيل System 7 كان يتيح استخدام الألوان، كانت واجهة المستخدم التلقائية لا تزال بالأبيض والأسود.

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

أحد أشكال ضعف البصر هو متلازمة رؤية الكمبيوتر، المعروفة أيضًا باسم إجهاد العين الرقمي، والتي يتم تعريفها على أنّها "مجموعة من مشاكل العين والرؤية المرتبطة باستخدام أجهزة الكمبيوتر (بما في ذلك أجهزة الكمبيوتر المكتبية والمحمولة والأجهزة اللوحية) وشاشات العرض الإلكترونية الأخرى (مثل الهواتف الذكية وأجهزة القراءة الإلكترونية)". اقترحت دراسات أنّ استخدام المراهقين للأجهزة الإلكترونية، خاصةً في الليل، يزيد من خطر قِصر مدة النوم، وطول فترة الاستغراق في النوم، وزيادة نقص النوم. بالإضافة إلى ذلك، أشارت العديد من الدراسات إلى أنّ التعرّض للضوء الأزرق يؤثر في تنظيم إيقاع الساعة البيولوجية ودورة النوم، وقد تؤدي البيئات غير المنتظمة إلى الحرمان من النوم، ما قد يؤثر في المزاج والأداء، وذلك وفقًا لبحث أجراه روزنفيلد. للحد من هذه الآثار السلبية، يمكن أن يساعد تقليل الضوء الأزرق من خلال تعديل درجة حرارة الألوان في الشاشة باستخدام ميزات مثل Night Shift في iOS أو الإضاءة الليلية في Android، بالإضافة إلى تجنُّب الأضواء الساطعة أو غير المنتظمة بشكل عام من خلال استخدام المظاهر الداكنة أو الأوضاع الداكنة.

توفير الطاقة في "الوضع الداكن" على شاشات AMOLED

أخيرًا، من المعروف أنّ الوضع الداكن يوفّر الكثير من الطاقة على شاشات AMOLED. أظهرت دراسات حالة Android التي تركّز على تطبيقات Google الرائجة، مثل YouTube، أنّ نسبة توفير الطاقة يمكن أن تصل إلى %60. يتضمّن الفيديو أدناه مزيدًا من التفاصيل حول دراسات الحالة هذه ومقدار توفير الطاقة لكل تطبيق.

تفعيل "الوضع الداكن" في نظام التشغيل

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

تتضمّن أنظمة التشغيل التي تتوافق مع الوضع الداكن أو المظهر الداكن عادةً خيارًا لتفعيله في مكان ما ضمن الإعدادات. في نظام التشغيل macOS X، يظهر في قسم عام ضمن إعدادات النظام باسم المظهر (لقطة شاشة)، وفي نظام التشغيل Windows 10، يظهر في قسم الألوان باسم اختيار اللون (لقطة شاشة). في نظام التشغيل Android Q، يمكنك العثور عليه ضمن الشاشة كزر تبديل المظهر الداكن (لقطة شاشة)، وفي نظام التشغيل iOS 13، يمكنك تغيير المظهر في قسم الشاشة والسطوع ضمن الإعدادات (لقطة شاشة).

طلب الوسائط prefers-color-scheme

سأقدّم لك بعض المعلومات النظرية قبل البدء. تسمح طلبات البحث عن الوسائط للمؤلفين باختبار قيم أو ميزات وكيل المستخدم أو جهاز العرض والاستعلام عنها، بغض النظر عن المستند الذي يتم عرضه. ويتم استخدامها في قاعدة CSS @media لتطبيق الأنماط بشكل مشروط على مستند، وفي سياقات ولغات أخرى مختلفة، مثل HTML وJavaScript. تتضمّن طلبات البحث عن الوسائط من المستوى 5 ما يُعرف بميزات الوسائط المفضّلة لدى المستخدم، أي طريقة تتيح للمواقع الإلكترونية رصد الطريقة المفضّلة لدى المستخدم لعرض المحتوى.

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

• light: يشير إلى أنّ المستخدِم أبلغ النظام بأنّه يفضّل صفحة ذات مظهر فاتح (نص داكن على خلفية فاتحة).
• dark: تشير إلى أنّ المستخدِم أبلغ النظام بأنّه يفضّل صفحة ذات مظهر داكن (نص فاتح على خلفية داكنة).

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

معرفة ما إذا كان المتصفّح يتيح استخدام "الوضع الداكن"

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

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log('🎉 Dark mode is supported');
}

في وقت كتابة هذا المقال، تتوافق prefers-color-scheme مع أجهزة الكمبيوتر والأجهزة الجوّالة (حيثما توفّرت) من خلال الإصدار 76 من Chrome وEdge، والإصدار 67 من Firefox، والإصدار 12.1 من Safari على نظام التشغيل macOS والإصدار 13 على نظام التشغيل iOS. بالنسبة إلى جميع المتصفحات الأخرى، يمكنك الاطّلاع على المستند هل يمكنني استخدام جداول الدعم؟.

التعرّف على الخيارات المفضّلة للمستخدم في وقت الطلب

يتيح عنوان Sec-CH-Prefers-Color-Scheme لتلميحات العميل للمواقع الإلكترونية الحصول على الإعدادات المفضّلة لنظام الألوان لدى المستخدم بشكل اختياري في وقت الطلب، ما يتيح للخوادم تضمين CSS المناسب وتجنُّب ظهور نظام الألوان غير الصحيح بشكل مفاجئ.

استخدام الوضع الداكن

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

• style.css الذي يحتوي على قواعد عامة يتم استخدامها على مستوى الموقع الإلكتروني.
• dark.css الذي يحتوي على القواعد اللازمة للوضع الداكن فقط.
• light.css الذي يحتوي على القواعد اللازمة للوضع الفاتح فقط.

استراتيجية التحميل

يتم تحميل العنصرَين الأخيرَين، light.css وdark.css، بشكل مشروط باستخدام طلب بحث <link media>. في البداية، لن تتوافق جميع المتصفّحات مع prefers-color-scheme (يمكن رصدها باستخدام النمط أعلاه)، وهو ما أتعامل معه بشكل ديناميكي من خلال تحميل ملف light.css التلقائي عبر عنصر <link rel="stylesheet"> يتم إدراجه بشكل شرطي في نص برمجي مضمّن صغير جدًا (الخيار "فاتح" هو خيار عشوائي، كان بإمكاني أيضًا جعل الخيار "داكن" هو تجربة الاحتياط التلقائية). لتجنُّب ظهور المحتوى بدون تنسيق، أخفي محتوى الصفحة إلى أن يتم تحميل light.css.

<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // In this case, light.css will be downloaded with `highest` priority.
  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
      'beforeend',
      '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
    );
  }
</script>
<!--
  Conditionally either load the light or the dark stylesheet. The matching file
  will be downloaded with `highest`, the non-matching file with `lowest`
  priority. If the browser doesn't support `prefers-color-scheme`, the media
  query is unknown and the files are downloaded with `lowest` priority (but
  above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
  rel="stylesheet"
  href="/light.css"
  media="(prefers-color-scheme: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />

بنية ورقة الأنماط

أستفيد إلى أقصى حد من متغيرات CSS، ما يتيح أن يكون style.css العام عامًا، ويتم تخصيص الوضع الفاتح أو الداكن في الملفَين الآخرَين dark.css وlight.css. يمكنك الاطّلاع أدناه على مقتطف من الأنماط الفعلية، ولكنّه سيكون كافيًا لنقل الفكرة العامة. أعرّف متغيرَين، -⁠-⁠color و-⁠-⁠background-color، ينشئان بشكل أساسي مظهرًا أساسيًا داكنًا على فاتح وآخر فاتحًا على داكن.

/* light.css: 👉 dark-on-light */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}

/* dark.css: 👉 light-on-dark */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
}

في style.css، أستخدم هذه المتغيرات في قاعدة body { … }. بما أنّها معرَّفة في :root فئة CSS الزائفة، وهي أداة اختيار تمثّل العنصر <html> في HTML وتتطابق مع أداة الاختيار html، باستثناء أنّ مستوى تحديدها أعلى، فإنّها تتتالى، ما يساعدني في تعريف متغيّرات CSS عامة.

/* style.css */
:root {
  color-scheme: light dark;
}

body {
  color: var(--color);
  background-color: var(--background-color);
}

في عينة التعليمات البرمجية أعلاه، من المحتمل أنّك لاحظت السمة color-scheme التي تتضمّن القيمة light dark المفصولة بمسافات.

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

بعد ذلك، ما عليك سوى تحديد متغيّرات CSS للعناصر المهمة على موقعك الإلكتروني. يساعد تنظيم الأنماط بشكل دلالي كثيرًا عند استخدام "الوضع الداكن". على سبيل المثال، بدلاً من -⁠-⁠highlight-yellow، ننصحك بتسمية المتغيّر -⁠-⁠accent-color، لأنّ اللون "الأصفر" قد لا يكون أصفر في الوضع الداكن أو العكس. في ما يلي مثال على بعض المتغيرات الأخرى التي أستخدمها في المثال.

/* dark.css */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
  --link-color: rgb(0, 188, 212);
  --main-headline-color: rgb(233, 30, 99);
  --accent-background-color: rgb(0, 188, 212);
  --accent-color: rgb(5, 5, 5);
}

/* light.css */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
  --link-color: rgb(0, 0, 238);
  --main-headline-color: rgb(0, 0, 192);
  --accent-background-color: rgb(0, 0, 238);
  --accent-color: rgb(250, 250, 250);
}

مثال كامل

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

جارٍ تحميل مقياس التأثير

عند تجربة هذا المثال، يمكنك معرفة سبب تحميل dark.css وlight.css من خلال طلبات البحث عن الوسائط. جرِّب تفعيل الوضع الداكن وإعادة تحميل الصفحة: سيتم تحميل أوراق الأنماط غير المتطابقة حاليًا، ولكن بأقل أولوية، بحيث لا تتنافس أبدًا مع الموارد التي يحتاجها الموقع الإلكتروني في الوقت الحالي.

الاستجابة للتغييرات في الوضع الداكن

كما هو الحال مع أي تغيير آخر في طلبات البحث عن الوسائط، يمكن الاشتراك في تغييرات "الوضع الداكن" من خلال JavaScript. يمكنك استخدام هذه الميزة، مثلاً، لتغيير رمز الموقع المفضّل لإحدى الصفحات بشكل ديناميكي أو تغيير <meta name="theme-color"> الذي يحدّد لون شريط عناوين URL في Chrome. يعرض المثال الكامل أعلاه هذا الإجراء، وللاطّلاع على التغييرات في لون المظهر والرمز المفضّل، افتح العرض التوضيحي في علامة تبويب منفصلة.

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addEventListener('change', (e) => {
  const darkModeOn = e.matches;
  console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});

بدءًا من الإصدار 93 من Chromium والإصدار 15 من Safari، يمكنك تعديل اللون استنادًا إلى طلب بحث وسائط باستخدام السمة media لعنصر لون المظهر meta. سيتم اختيار أول نتيجة تطابق البحث. على سبيل المثال، يمكنك استخدام لون واحد للوضع الفاتح وآخر للوضع الداكن. في وقت كتابة هذا المقال، لا يمكنك تحديد هذه العناصر في بيان التطبيق. اطّلِع على المشكلة w3c/manifest#975 على GitHub.

<meta
  name="theme-color"
  media="(prefers-color-scheme: light)"
  content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

تصحيح أخطاء "الوضع الداكن" واختباره

محاكاة prefers-color-scheme في "أدوات مطوّري البرامج"

قد يصبح التبديل بين أنظمة الألوان في نظام التشغيل بأكمله أمرًا مزعجًا بسرعة، لذا تتيح لك "أدوات مطوّري البرامج في Chrome" الآن محاكاة نظام الألوان المفضّل لدى المستخدم بطريقة تؤثر فقط في علامة التبويب المرئية حاليًا. افتح قائمة الأوامر، وابدأ بكتابة Rendering، وشغِّل الأمر Show Rendering، ثم غيِّر الخيار محاكاة ميزة prefers-color-scheme لوسائط صفحات الأنماط المتتالية (CSS).

أخذ لقطات شاشة prefers-color-scheme باستخدام Puppeteer

Puppeteer هي مكتبة Node.js توفر واجهة برمجة تطبيقات عالية المستوى للتحكّم في Chrome أو Chromium من خلال بروتوكول أدوات مطوّري البرامج. من خلال dark-mode-screenshot، نوفّر لك نصًا برمجيًا من Puppeteer يتيح لك إنشاء لقطات شاشة لصفحاتك في الوضعين الداكن والفاتح. يمكنك تشغيل هذا النص البرمجي لمرة واحدة، أو يمكنك بدلاً من ذلك جعله جزءًا من مجموعة اختبارات الدمج المتواصل (CI).

npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750

أفضل الممارسات المتعلّقة بالوضع الداكن

تجنُّب اللون الأبيض النقي

من التفاصيل الصغيرة التي ربما لاحظتها أنّني لا أستخدم اللون الأبيض النقي. بدلاً من ذلك، لمنع التوهج والتشويش على المحتوى الداكن المحيط، أختار لونًا أبيض أغمق قليلاً. يمكنك استخدام عبارة مثل rgb(250, 250, 250).

إعادة تلوين الصور الفوتوغرافية وتعتيمها

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

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

بما أنّ إعادة التلوين مطلوبة فقط في الوضع الداكن، أي عندما يكون dark.css نشطًا، لا توجد قواعد مقابلة في light.css.

/* dark.css */
--image-filter: grayscale(50%);

img:not([src*='.svg']) {
  filter: var(--image-filter);
}

تخصيص شدة إعادة تلوين الوضع الداكن باستخدام JavaScript

تختلف احتياجات المستخدمين من الوضع الداكن. من خلال الالتزام بطريقة إعادة التلوين الموضّحة أعلاه، يمكنني بسهولة جعل مستوى كثافة تدرّج الرمادي من الخيارات المفضّلة للمستخدم التي يمكنني تغييرها باستخدام JavaScript، ومن خلال ضبط القيمة 0%، يمكنني أيضًا إيقاف إعادة التلوين تمامًا. يُرجى العِلم أنّ document.documentElement توفّر مرجعًا إلى العنصر الجذر للمستند، أي العنصر نفسه الذي يمكنني الرجوع إليه باستخدام :root فئة CSS الزائفة.

const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);

قلب الرسومات المتّجهة والرموز

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

لاحظ كيف أنّني أعكس الأيقونات في dark.css فقط وليس في light.css، وكيف أنّ :hover يحصل على شدة عكس مختلفة في الحالتين لجعل الأيقونة تبدو أكثر قتامة أو أكثر سطوعًا قليلاً، وذلك حسب الوضع الذي اختاره المستخدم.

/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);

img[src*='.svg'] {
  filter: var(--icon-filter);
}

/* light.css */
--icon-filter_hover: invert(60%);

/* style.css */
img[src*='.svg']:hover {
  filter: var(--icon-filter_hover);
}

استخدام currentColor لملفات SVG المضمّنة

بالنسبة إلى صور SVG المضمّنة، بدلاً من استخدام فلاتر العكس، يمكنك الاستفادة من الكلمة الرئيسية currentColor في CSS التي تمثّل قيمة السمة color لأحد العناصر. يتيح لك ذلك استخدام القيمة color في الخصائص التي لا تتلقّاها تلقائيًا. من المفيد معرفة أنّه في حال استخدام currentColor كقيمة للسمتَين fill أو stroke في SVG، سيتم بدلاً من ذلك استخلاص القيمة من القيمة الموروثة لسمة اللون. والأفضل من ذلك أنّ هذه الطريقة تعمل أيضًا مع <svg><use href="…"></svg>، ما يتيح لك استخدام موارد منفصلة مع استمرار تطبيق currentColor في السياق. يُرجى العِلم أنّ هذه الطريقة لا تعمل إلا مع صور SVG المضمّنة أو <use href="…">، ولكنّها لا تعمل مع صور SVG التي تتم الإشارة إليها على أنّها src لصورة أو بطريقة ما عبر CSS. يمكنك الاطّلاع على هذا التطبيق في العرض التوضيحي أدناه.

<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
>
  […]
</svg>

انتقالات سلسة بين الأوضاع

يمكن تسهيل عملية التبديل من الوضع الداكن إلى الوضع الفاتح أو العكس، وذلك لأنّ كلاً من color وbackground-color هما خاصيتان من خصائص CSS يمكن تحريكهما. إنشاء الصورة المتحركة سهل مثل تعريف سمتَين transition للسمتَين. يوضّح المثال أدناه الفكرة العامة، ويمكنك تجربتها مباشرةً في العرض التوضيحي.

body {
  --duration: 0.5s;
  --timing: ease;

  color: var(--color);
  background-color: var(--background-color);

  transition: color var(--duration) var(--timing), background-color var(
        --duration
      ) var(--timing);
}

توجيه فني باستخدام الوضع الداكن

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

في الوضع الداكن، يعود إلى المصمّم تقدير ما إذا كانت الصورة هي الأفضل في وضع معيّن وما إذا كانت إعادة تلوين الصور غير مناسبة. في حال استخدامها مع العنصر <picture>، يمكن أن يعتمد <source> للصورة المطلوب عرضها على السمة media. في المثال أدناه، أعرض نصف الكرة الغربي في الوضع الداكن، ونصف الكرة الشرقي في الوضع الفاتح أو عندما لا يتم تحديد أي إعداد مفضّل، مع ضبط نصف الكرة الشرقي تلقائيًا في جميع الحالات الأخرى. هذا بالطبع لأغراض توضيحية فقط. يمكنك إيقاف الوضع الداكن أو تفعيله على جهازك لمعرفة الفرق.

<picture>
  <source srcset="western.webp" media="(prefers-color-scheme: dark)" />
  <source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
  <img src="eastern.webp" />
</picture>

الوضع الداكن مع إمكانية إيقافه

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

العنصر المخصّص <dark-mode-toggle>

يمكنك بالطبع إنشاء الرمز البرمجي لهذا الغرض بنفسك، ولكن يمكنك أيضًا استخدام عنصر مخصّص جاهز (مكوّن ويب) أنشأته لهذا الغرض. يُطلق على هذه الأداة اسم <dark-mode-toggle>، وهي تضيف مفتاح تبديل (المظهر الداكن: مفعّل/غير مفعّل) أو أداة اختيار المظهر (المظهر: فاتح/داكن) إلى صفحتك، ويمكنك تخصيصها بالكامل. يعرض العرض التوضيحي أدناه العنصر أثناء العمل (لقد أضفته أيضًا 🤫 بشكل خفي إلى جميع الأمثلة الأخرى أعلاه).

<dark-mode-toggle
  legend="Theme Switcher"
  appearance="switch"
  dark="Dark"
  light="Light"
  remember="Remember this"
></dark-mode-toggle>

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

الاستنتاجات

إنّ العمل مع الوضع الداكن ودعمه أمر ممتع ويفتح آفاقًا جديدة للتصميم. بالنسبة إلى بعض الزوّار، يمكن أن يكون ذلك الفرق بين عدم القدرة على التعامل مع موقعك الإلكتروني والاستمتاع بتجربة استخدام سلسة. هناك بعض المشاكل المحتملة، لذا يجب إجراء اختبارات دقيقة، ولكن يتيح لك الوضع الداكن إظهار اهتمامك بجميع المستخدمين. من المفترض أنّ أفضل الممارسات المذكورة في هذه المشاركة والأدوات المساعدة، مثل العنصر المخصّص <dark-mode-toggle>، ستمنحك الثقة في قدرتك على إنشاء تجربة رائعة في الوضع الداكن. يُرجى إعلامي على Twitter بما تنشئه وما إذا كانت هذه المشاركة مفيدة أو تقديم اقتراحات لتحسينها. شكرًا على القراءة. 🌒

روابط ذات صلة

مراجع لطلب البحث عن الوسائط prefers-color-scheme:

• صفحة "حالة النظام الأساسي Chrome"
• خطأ في Chromium
• مواصفات المستوى 5 لطلبات البحث عن الوسائط

مراجع حول العلامة الوصفية color-scheme وسمة CSS:

• السمة color-scheme في CSS والعلامة الوصفية
• صفحة "حالة النظام الأساسي Chrome"
• خطأ في Chromium
• مواصفات الوحدة النمطية لضبط الألوان في CSS من المستوى 1
• مشكلة CSS WG GitHub المتعلّقة بالعلامة الوصفية وسمة CSS
• مشكلة في GitHub ضمن HTML WHATWG بشأن العلامة الوصفية

روابط عامة حول "الوضع الداكن":

• التصميم المتعدد الأبعاد—المظهر الداكن
• الوضع الداكن في "أداة فحص الويب"
• إتاحة "الوضع الداكن" في WebKit
• إرشادات Apple بشأن واجهة المستخدم—الوضع الداكن

مقالات بحثية أساسية حول هذه المشاركة:

• ما هي وظيفة "أنظمة الألوان المتوافقة" في "الوضع الداكن"؟ 🤔
• ليكن ظلام! 🌚 ربما…
• إعادة تلوين الصور في "الوضع الداكن"

الإقرارات

إنّ ميزة الوسائط prefers-color-scheme وخاصية CSS color-scheme وعلامة التعريف الوصفية ذات الصلة هي من عمل 👏 Rune Lillesveen. يشارك "رون" أيضًا في تحرير مواصفات وحدة تعديل الألوان في CSS المستوى 1. أودّ أن أتقدّم بالشكر 🙏 إلى لوكاس زبيلوت وروان ميروود وشيراغ ديساي وروب دودسون على مراجعتهم الدقيقة لهذه المقالة. استراتيجية التحميل هي من بنات أفكار جيك أرشيبالد. أشار إليّ إميليو كوبوس ألفاريز إلى طريقة رصد prefers-color-scheme الصحيحة. وصلتنا النصيحة التي تتضمّن ملفات SVG المشار إليها وcurrentColor من تيموثي هاتشر. أخيرًا، أودّ أن أشكر المشاركين المجهولين في دراسات المستخدمين المختلفة الذين ساهموا في صياغة الاقتراحات الواردة في هذه المقالة.