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

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

Thomas Steiner

مقدمة

الوضع المُعتِم قبل الوضع المُعتِم

شاشة كمبيوتر ذات شاشة خضراء
شاشة خضراء (المصدر)

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

معالجة النصوص بلون أبيض داكن
أبيض على داكن (المصدر)

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

صفحة ويب باللون الأبيض الداكن في متصفح WorldWideWeb
متصفّح WorldWideWeb (المصدر)

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

هاتف ذكي يتم استخدامه أثناء الاستلقاء في السرير
الهاتف الذكي المستخدم في السرير (المصدر: Unسبلاش)

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

مزايا الوضع الداكن

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

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

CloseView في نظام التشغيل Mac OS 7 مع
System 7 CloseView (المصدر)

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

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

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

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

توفير الطاقة في الوضع المُعتِم على شاشات AMOLED

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

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

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

إعدادات الوضع الداكن في Android Q
إعدادات المظهر الداكن في Android Q

أنظمة التشغيل التي تتيح الوضع الداكن أو المظهر الداكن يكون لديك عادةً خيار لتنشيطها في مكان ما من الإعدادات. على نظام التشغيل 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 على أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة (حيثما كان ذلك متاحًا). حسب Chrome وEdge اعتبارًا من الإصدار 76، وFirefox اعتبارًا من الإصدار 67، وSafari اعتبارًا من الإصدار 12.1 على نظام التشغيل 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 { … }. كما هي محددة في فئة CSS الزائفة: :root: الذي يشير إلى أن العنصر <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 الدقيقة في المستوى 1 من وحدة تعديل الألوان في CSS

كل شيء آخر هو مجرد مسألة تحديد متغيرات 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 من خلال الاستعلامات عن الوسائط. حاول تبديل "الوضع الداكن" وأعِد تحميل الصفحة: سيتم تحميل أوراق الأنماط المحددة غير المتطابقة حاليًا، ولكن بأولوية أدنى، لكي لا يتنافسوا أبدًا مع الموارد التي يحتاجها الموقع الإلكتروني في الوقت الحالي.

رسم تخطيطي لتحميل الشبكة يوضّح كيفية تحميل CSS للوضع الداكن بأولوية أدنى في الوضع الفاتح
يحمّل الموقع الإلكتروني في الوضع الفاتح محتوى CSS بالوضع الداكن بأقل أولوية.
رسم تخطيطي لتحميل الشبكة يوضّح كيف يتم تحميل صفحات الأنماط المتتالية (CSS) للوضع الفاتح في الوضع الداكن
يحمّل الموقع الإلكتروني في الوضع الداكن محتوى CSS بالوضع الفاتح بأقل أولوية.
رسم تخطيطي لتحميل الشبكة يوضّح كيفية تحميل CSS للوضع الداكن بأولوية أقل في الوضع الفاتح التلقائي
إنّ الموقع الإلكتروني الذي يستخدم الوضع الفاتح التلقائي في متصفّح لا يتوافق مع prefers-color-scheme يحمِّل صفحات 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'}.`);
});

بدءًا من Chromium 93 وSafari 15، يمكنك ضبط اللون استنادًا إلى الوسائط التي تحتوي على السمة 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، ثم غيِّر خيار محاكاة ميزة Favourite Media features-color-scheme.

لقطة شاشة لـ &quot;محاكاة ميزة تفضيلات وسائط CSS&quot; (Favorites-color-scheme) الخيار المتوفّر في علامة تبويب &quot;العرض&quot; في &quot;أدوات مطوري البرامج في Chrome&quot;

جارٍ أخذ لقطة شاشة لـ "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 كقيمة لملف SVG fill أو stroke، وإنما تأخذ قيمته من القيمة الموروثة لخاصية اللون. والأفضل من ذلك: يعمل هذا أيضًا مع <svg><use href="…"></svg>، حتى تتمكن من الحصول على موارد منفصلة وcurrentColor سيتم تطبيقها في السياق. يُرجى العِلم أنّ هذه الطريقة لا تعمل إلا مع ملفات SVG inline أو <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> في الوضع الفاتح.
تبديل الوضع الداكن في الوضع الفاتح
<dark-mode-toggle> في الوضع الداكن

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

الاستنتاجات

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

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

موارد العلامة الوصفية color-scheme والخاصية CSS:

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

مقالات البحث الخلفية لهذا المنشور:

شكر وتقدير

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