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

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

مقدمة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

جزء أخير من النظرية قبل أن أبدأ. تتيح طلبات البحث عن الوسائط للمؤلفين اختبار القيم أو ميزات وكيل المستخدم أو جهاز العرض وطلب البحث عنها، بغض النظر عن المستند الذي يتم عرضه. وتُستخدَم في قاعدة @media في CSS لتطبيق الأنماط بشكل مشروط على مستند، وفي سياقات ولغات أخرى مختلفة، مثل 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 من خلال الاستعلامات عن الوسائط. جرِّب تبديل الوضع الداكن وإعادة تحميل الصفحة: سيستمر تحميل أوراق الأنماط غير المطابقة حاليًا، ولكن بأولوية أدنى، حتى لا تتنافس أبدًا مع الموارد التي يحتاجها الموقع الإلكتروني في الوقت الحالي.

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

مثل أي تغيير آخر في الاستعلام عن الوسائط، يمكن الاشتراك في تغييرات الوضع الداكن من خلال 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 ثم غيِّر خيار محاكاة ميزة وسائط CSS المفضّلة: لون-scheme.

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

Puppeteer هو مكتبة Node.js توفّر واجهة برمجة تطبيقات عالية المستوى للتحكّم في Chrome أو Chromium من خلال بروتوكول DevTools. من خلال 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 يوفّر مرجعًا إلى العنصر الجذر في المستند، أي العنصر نفسه الذي يمكنني الإشارة إليه باستخدام فئة CSS الزائفة في :root.

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 في السياق. تجدر الإشارة إلى أنّ هذا الإجراء يعمل فقط مع الرسومات inline أو <use href="…"> بتنسيق SVG، ولكنّه لا يعمل مع ملفات 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:

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

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

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

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

• ما الذي يفعله الوضع الداكن "supported-color-schemes" فعلاً؟ 🤔
• لنحل الظلام! 🌚 ربما...
• إعادة التلوين في "الوضع الداكن"

شكر وتقدير

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