المبالغة في زائدة أم ضرورة؟ تعرّف على معلومات مفصّلة عن الوضع الداكن وكيفية توفيره للمستخدمين.
مقدمة
الوضع الداكن قبل الوضع الداكن
![شاشة كمبيوتر خضراء](https://web.dev/static/articles/prefers-color-scheme/image/green-screen-computer-mon-01027d880d7ee.jpg?authuser=6&hl=ar)
لقد انطلقنا من دائرة كاملة باستخدام الوضع الداكن. في بداية الحوسبة الشخصية، لم يكن الوضع الداكن مسألة اختيار، ولكن في الحقيقة: كانت شاشات الكمبيوتر الأحادية اللون CRT تعمل عن طريق إطلاق أشعة إلكترونية على شاشة الفوسفور، وكان عنصر الفوسفور المستخدَم في أول تقنية أشعة كرتونية خضراء اللون. بما أنّ النص كان معروضًا باللون الأخضر وكانت بقية الشاشة سوداء، كانت هذه النماذج يُشار إليها غالبًا باسم الشاشات الخضراء.
![معالجة الكلمات باللون الأبيض الداكن](https://web.dev/static/articles/prefers-color-scheme/image/dark-white-word-processi-c815d99e74013.jpg?authuser=6&hl=ar)
بعد ذلك، عرضت تقنية CRT للألوان اللونية ألوانًا متعددة من خلال استخدام الفوسفورات الأحمر والأخضر والأزرق. وقد أنشأوا اللون الأبيض عن طريق تنشيط جميع الفوسفورات الثلاثة في آن واحد. مع ظهور WYSIWYG للنشر على الكمبيوتر المكتبي بطريقة أكثر تعقيدًا، انتشرت فكرة جعل المستند الافتراضي على شكل ورقة مطبوعة.
![صفحة ويب بلون أبيض داكن في متصفّح WorldWideWeb](https://web.dev/static/articles/prefers-color-scheme/image/dark-white-webpage-the-b32b5ae575bbe.png?authuser=6&hl=ar)
وهنا انطلق الأبيض الداكن كاتجاه للتصميم، وانتقل هذا الاتجاه إلى الويب الذي بدأ يستند إلى المستندات. وقد عرض المتصفّح الأول، WorldWideWeb، (لم تكن خدمة CSS مخترعة حتى بعد)، صفحات الويب بهذه الطريقة. حقيقة ممتعة: كان المتصفح الثاني على الإطلاق، متصفّح "وضع الخط"، وهو متصفّح يستند إلى الوحدة الطرفية، كان باللون الأخضر في الظلام. في الوقت الحالي، يتم تصميم صفحات الويب وتطبيقات الويب عادةً باستخدام نص داكن على خلفية فاتحة، وهو افتراض أساسي يتم ترميزه أيضًا في أوراق الأنماط لوكيل المستخدم، بما في ذلك Chrome.
![تم استخدام الهاتف الذكي أثناء الاستلقاء في السرير](https://web.dev/static/articles/prefers-color-scheme/image/smartphone-used-while-lyi-d0cbc01823ee4.jpg?authuser=6&hl=ar)
لقد انقضت أيام CRT منذ وقت طويل. تحول استهلاك المحتوى وإنشاؤه إلى الأجهزة الجوّالة التي تستخدم شاشات LCD بإضاءة خلفية أو شاشات AMOLED موفّرة للطاقة. أدت أجهزة الكمبيوتر والأجهزة اللوحية والهواتف الذكية الأصغر حجمًا وقابلية النقل إلى أنماط استخدام جديدة. غالبًا ما تحدث المهام الترفيهية مثل تصفح الويب والترميز للتسلية والألعاب المتطورة بعد ساعات العمل في البيئات المعتمة. حتى أن الأشخاص يستمتعون بأجهزتهم في أسرّةهم ليلاً. كلما زاد عدد الأشخاص الذين يستخدمون أجهزتهم في الظلام، أصبحت فكرة العودة إلى جذور الإضاءة في الظلام أكثر شيوعًا.
أسباب استخدام "الوضع الداكن"
الوضع الداكن لأسباب جمالية
عندما يتم سؤال المستخدمين عن سبب رضاهم عن الوضع الداكن أو سبب رغبتهم في ذلك، يكون الرد الأكثر شيوعًا هو "الوضع أسهل من حيث العين" متبوع بعبارة "أنه أنيق وجميل". جاءت شركة Apple في مستندات مطوّري البرامج الخاصة بـ "الوضع الداكن" بصراحة: "يختار معظم المستخدمين منح مظهر فاتح أو داكن، أي خيار جمالي، وقد لا يكون مرتبطًا بظروف الإضاءة المحيطة".
![CloseView في نظام التشغيل Mac OS 7 مع](https://web.dev/static/articles/prefers-color-scheme/image/closeview-mac-os-system-d5554c867b6af.png?authuser=6&hl=ar)
"الوضع الداكن" كأداة لتسهيل الاستخدام
هناك أيضًا أشخاص يحتاجون إلى الوضع الداكن ويستخدمه كأداة أخرى لتسهيل الاستخدام، مثل المستخدمين الذين يعانون من ضعف في النظر. كان أقرب وقت يمكنني العثور فيه على أداة تسهيل الاستخدام هذه هو ميزة CloseView في System 7، والتي تضمّنت خيارَي Black on White وWhite on Black. على الرغم من توافق ألوان النظام 7، لا تزال واجهة المستخدم التلقائية بالأبيض والأسود.
أظهرت هذه التطبيقات المستندة إلى العكس نقاط ضعفها بمجرد تقديم اللون. أظهر بحث المستخدم الذي أجراه "سزبيرو" وآخرون حول كيفية وصول الأشخاص الذين يعانون من ضعف في النظر إلى أجهزة الحوسبة أن جميع المستخدمين الذين تمت مقابلتهم لم يعجبهم الصور المقلوبة، لكن العديد منهم يفضّلون استخدام نص فاتح على خلفية داكنة. تستوعب Apple هذا الخيار المفضَّل للمستخدم من خلال ميزة تُسمى Smart Inversa (القلب الذكي)، التي تعمل على عكس الألوان على الشاشة، باستثناء الصور والوسائط وبعض التطبيقات التي تستخدم أنماط الألوان الداكنة.
أحد الأشكال الخاصة لضعف البصر هو متلازمة الرؤية الحاسوبية، التي تُعرف أيضًا باسم إجهاد العين الرقمية، والتي يتم تعريفها على أنها مجموعة بين مشاكل العين والرؤية المرتبطة باستخدام أجهزة الكمبيوتر (بما في ذلك الكمبيوتر المكتبي والكمبيوتر المحمول والأجهزة اللوحية) وغيرها من الشاشات الإلكترونية (مثل الهواتف الذكية وأجهزة القراءة الإلكترونية). تم اقتراح أن استخدام المراهقين للأجهزة الإلكترونية، خصوصًا أثناء الليل، يؤدي إلى زيادة خطر النوم لمدة أقصر، ووقت أطول لوقت استجابة النوم، وزيادة نقص النوم. بالإضافة إلى ذلك، تبيّن على نطاق واسع أنّ التعرّض للضوء الأزرق يرتبط بتنظيم النظم اليومي ودورة النوم، وقد تؤدي بيئات الضوء غير المنتظمة إلى الحرمان من النوم، ما قد يؤثر في المزاج وأداء المهام، وذلك وفقًا لأبحاث أجرتها شركة Rosenfield. للحدّ من هذه التأثيرات السلبية، يمكن تقليل الضوء الأزرق عن طريق ضبط درجة حرارة ألوان الشاشة من خلال ميزات مثل الإضاءة الليلية أو الإضاءة الليلية في نظام التشغيل iOS وتجنُّب الإضاءة الساطعة أو غير المنتظمة بشكل عام من خلال المظاهر الداكنة أو الأوضاع الداكنة.
توفير الطاقة في الوضع الداكن على شاشات AMOLED
أخيرًا، يُعرف الوضع الداكن بأنّه يوفّر الكثير من الطاقة على شاشات AMOLED. أظهرت دراسات حالة Android التي ركزت على تطبيقات Google الشائعة مثل YouTube أن توفير الطاقة يمكن أن يصل إلى 60٪. يحتوي الفيديو أدناه على مزيد من التفاصيل حول دراسات الحالة هذه وتوفير الطاقة لكل تطبيق.
تفعيل "الوضع الداكن" في نظام التشغيل
بعد أن اطّلعت على معلومات عن أهمية "الوضع الداكن" بالنسبة إلى العديد من المستخدمين، لنطّلع على كيفية تقديم الدعم له.
![إعدادات الوضع الداكن في Android Q](https://web.dev/static/articles/prefers-color-scheme/image/android-q-dark-mode-setti-43e0e230e78da.png?authuser=6&hl=ar)
لدى أنظمة التشغيل التي تتيح الوضع الداكن أو المظهر الداكن عادةً خيار تفعيلهما في مكان ما ضمن الإعدادات. في نظام التشغيل 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
من خلال الاستعلامات عن الوسائط.
جرِّب تبديل الوضع الداكن وإعادة تحميل الصفحة:
سيستمر تحميل أوراق الأنماط غير المطابقة حاليًا، ولكن بأولوية أدنى،
حتى لا تتنافس أبدًا مع الموارد التي يحتاجها الموقع الإلكتروني في الوقت الحالي.
![رسم بياني لتحميل الشبكة يعرض كيفية تحميل CSS في الوضع الداكن بأولوية أدنى في الوضع الفاتح](https://web.dev/static/articles/prefers-color-scheme/image/network-loading-diagram-s-012ca50547d95.png?authuser=6&hl=ar)
![رسم بياني لتحميل الشبكة يعرض كيفية تحميل CSS في الوضع الداكن بأولوية أدنى في الوضع الداكن](https://web.dev/static/articles/prefers-color-scheme/image/network-loading-diagram-s-2c75aa35a227f.png?authuser=6&hl=ar)
![رسم بياني لتحميل الشبكة يعرض كيفية تحميل CSS في الوضع الداكن في الوضع التلقائي للضوء بأولوية أدنى](https://web.dev/static/articles/prefers-color-scheme/image/network-loading-diagram-s-f53f63ae3c9fc.png?authuser=6&hl=ar)
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
ثم غيِّر خيار محاكاة ميزة وسائط CSS المفضّلة: لون-scheme.
![لقطة شاشة لخيار "محاكاة ميزة وسائط CSS المفضّلة" في علامة تبويب "العرض" في "أدوات مطوري البرامج في Chrome"](https://web.dev/static/articles/prefers-color-scheme/image/a-screenshot-the-emulat-f4221ac142773.png?authuser=6&hl=ar)
لقطة شاشة لـ 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)
يعمل بشكل جيد.
إعادة تلوين الصور الفوتوغرافية وتعتيمها
إذا قارنت لقطتَي الشاشة أدناه، ستلاحظ أنّ المظهر الأساسي لم يتغير من داكن على ضوء فاتح إلى فاتح على داكن، بل ستلاحظ أيضًا أنّ صورة الجزء الرئيسي تبدو مختلفة قليلاً. أظهر بحثي في سلوكيات المستخدمين أنّ أغلب المشاركين في الاستطلاع يفضّلون استخدام صور أقل سطوعًا وأقل حيوية عندما يكون الوضع الداكن مفعَّلاً. أشير إلى ذلك باسم إعادة تلوين.
![الصورة الرئيسية معتمة قليلاً في الوضع الداكن.](https://web.dev/static/articles/prefers-color-scheme/image/hero-image-slightly-darke-a5b441df726e3.png?authuser=6&hl=ar)
![صورة جزء رئيسي عادية في الوضع الفاتح.](https://web.dev/static/articles/prefers-color-scheme/image/regular-hero-image-light-28d9151fd34c3.png?authuser=6&hl=ar)
يمكن إعادة التلوين من خلال فلتر 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
.
![يتم قلب الرموز في الوضع الداكن.](https://web.dev/static/articles/prefers-color-scheme/image/icons-are-inverted-dark-d78f9971c6dd6.png?authuser=6&hl=ar)
![الرموز العادية في الوضع الفاتح](https://web.dev/static/articles/prefers-color-scheme/image/regular-icons-light-mode-bcabc11023a1e.png?authuser=6&hl=ar)
لاحظ كيف يمكنني عكس الرموز مرة أخرى في 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>
![الوضع الداكن والتبديل إلى الوضع الفاتح](https://web.dev/static/articles/prefers-color-scheme/image/dark-mode-toggle-light-4a5dd3fe9675d.png?authuser=6&hl=ar)
<dark-mode-toggle>
في الوضع الفاتح.
![الوضع الداكن والتبديل إلى الوضع الفاتح](https://web.dev/static/articles/prefers-color-scheme/image/dark-mode-toggle-light-f0b507bcb5df2.png?authuser=6&hl=ar)
<dark-mode-toggle>
في الوضع الداكن.
جرِّب النقر على عناصر التحكّم في الوضع الداكن في أعلى يسار الشاشة في العرض التوضيحي أدناه. وإذا وضعت علامة في مربّع الاختيار في عنصر التحكّم الثالث والرابع، يمكنك معرفة كيف يتم تذكُّر خيار الوضع حتى عند إعادة تحميل الصفحة. يتيح ذلك للزوار الحفاظ على نظام التشغيل الخاص بهم في الوضع الداكن، مع الاستفادة من موقعك الإلكتروني في الوضع الفاتح أو العكس.
الاستنتاجات
سيكون العمل باستخدام الوضع الداكن ودعمه ممتعًا ويفتح آفاقًا جديدة للتصميم.
بالنسبة إلى بعض الزوّار، قد يمثّل ذلك الفارق بين عدم القدرة على التعامل مع موقعك الإلكتروني وبين شعور المستخدمين بالرضا.
على الرغم من احتمال حدوث بعض المشاكل، إلا أنّه يجب إجراء اختبارات دقيقة،
لكن الوضع الداكن يوفّر بالتأكيد فرصة رائعة لإظهار اهتمامك بجميع المستخدمين.
إنّ أفضل الممارسات المذكورة في هذه المشاركة وأدوات المساعدة، مثل العنصر المخصّص <dark-mode-toggle>
، يجب أن تجعلك واثقًا من قدرتك على تقديم تجربة رائعة في الوضع الداكن.
يُرجى إخباري على Twitter بالمحتوى الذي تنشئه وما إذا كانت هذه المشاركة مفيدة
أو أيضًا اقتراحات لتحسينها.
شكرًا على القراءة. 🌒
روابط ذات صلة
موارد للاستعلام عن الوسائط prefers-color-scheme
:
موارد العلامة الوصفية 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.
أخيرًا، أنا ممتن للعديد من المشاركين المجهولين في دراسات المستخدمين المختلفة
التي ساعدت في تشكيل التوصيات الواردة في هذه المقالة.
صورة رئيسية من تصوير ناثان أندرسون.