هل هي مبالغ فيها أم ضرورية؟ تعرَّف على كل ما يتعلّق بالوضع الداكن وكيفية إتاحته ليستفيد منه المستخدمون.
مقدمة
الوضع الداكن قبل الوضع الداكن
لقد أكملنا دورة كاملة مع الوضع الداكن. في بداية عصر الحوسبة الشخصية، لم يكن الوضع الداكن خيارًا، بل كان واقعًا: فشاشات الكمبيوتر CRT أحادية اللون كانت تعمل عن طريق إطلاق حزم إلكترونية على شاشة فسفورية، وكان الفسفور المستخدم في شاشات CRT المبكرة أخضر اللون. وبما أنّ النص كان يظهر باللون الأخضر وبقية الشاشة باللون الأسود، غالبًا ما كان يُشار إلى هذه النماذج باسم الشاشات الخضراء.
أما شاشات CRT الملونة التي تم تقديمها لاحقًا، فكانت تعرض ألوانًا متعددة من خلال استخدام الفوسفور الأحمر والأخضر والأزرق. وتمكّنوا من إنشاء اللون الأبيض من خلال تفعيل جميع الفوسفورات الثلاثة في الوقت نفسه. ومع ظهور WYSIWYG الأكثر تطورًا الذي يعتمد على مبدأ ما تراه هو ما تحصل عليه، أصبحت فكرة جعل المستند الافتراضي يشبه ورقة مادية شائعة.
هنا بدأ اتجاه تصميم الداكن على الأبيض، وانتقل هذا الاتجاه إلى الويب المبكر المستند إلى المستندات. أول متصفح على الإطلاق، WorldWideWeb (تذكَّر أنّه لم يتم اختراع CSS بعد)، كان يعرض صفحات الويب بهذه الطريقة. معلومة مفيدة: كان ثاني متصفّح على الإطلاق، وهو Line Mode Browser، متصفّحًا يستند إلى وحدة طرفية، وكان لونه أخضر على خلفية داكنة. في الوقت الحالي، يتم عادةً تصميم صفحات الويب وتطبيقات الويب بنص داكن على خلفية فاتحة، وهو افتراض أساسي يتم أيضًا ترميزه في أوراق أنماط وكيل المستخدم، بما في ذلك Chrome.
لقد ولّت أيام شاشات CRT منذ فترة طويلة. انتقل استهلاك المحتوى وإنشاؤه إلى الأجهزة الجوّالة التي تستخدم شاشات LCD ذات الإضاءة الخلفية أو شاشات AMOLED الموفّرة للطاقة. أدت أجهزة الكمبيوتر والأجهزة اللوحية والهواتف الذكية الأصغر حجمًا والأكثر قابلية للنقل إلى أنماط استخدام جديدة. غالبًا ما تتم ممارسة مهام الترفيه، مثل تصفُّح الويب والبرمجة من أجل المتعة والألعاب المتطوّرة، بعد ساعات العمل في بيئات ذات إضاءة خافتة. حتى أنّهم يستخدمونها في أسرّتهم ليلاً. كلما زاد عدد الأشخاص الذين يستخدمون أجهزتهم في الظلام، زادت شعبية فكرة العودة إلى جذور الضوء على الظلام.
أهمية الوضع الداكن
الوضع الداكن لأسباب جمالية
عندما يُسأل المستخدمون عن سبب إعجابهم بالوضع الداكن أو رغبتهم في استخدامه، تكون الإجابة الأكثر شيوعًا هي "أنّه مريح للعينين"، تليها "أنّه أنيق وجميل". تذكر شركة Apple في مستندات المطوّرين حول الوضع الداكن صراحةً ما يلي: "إنّ اختيار تفعيل المظهر الفاتح أو الداكن هو اختيار جمالي لمعظم المستخدمين، وقد لا يرتبط بظروف الإضاءة المحيطة".
الوضع الداكن كأداة لتسهيل الاستخدام
هناك أيضًا أشخاص يحتاجون فعليًا إلى "الوضع الداكن" ويستخدمونه كأداة لتسهيل الاستخدام، مثل المستخدمين الذين يعانون من ضعف في النظر. أول ظهور لأداة تسهيل الاستخدام هذه كان في ميزة CloseView في نظام التشغيل System 7، والتي كانت تتضمّن مفتاح تبديل بين الأسود على الأبيض والأبيض على الأسود. على الرغم من أنّ نظام التشغيل System 7 كان يتيح استخدام الألوان، كانت واجهة المستخدم التلقائية لا تزال باللونَين الأبيض والأسود.
وقد أظهرت هذه التطبيقات المستندة إلى الانعكاس نقاط ضعفها بعد إدخال الألوان. أظهر البحث في سلوكيات المستخدمين الذي أجراه "سبيرو" وآخرون حول كيفية وصول الأشخاص الذين يعانون من ضعف في النظر إلى أجهزة الحوسبة أنّ جميع المستخدمين الذين تمت مقابلتهم لم تعجبهم الصور المعكوسة، ولكن فضّل الكثير منهم النص الفاتح على خلفية داكنة. تستوعب 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.
بالنسبة إلى جميع المتصفحات الأخرى، يمكنك الاطّلاع على مستند جداول التوافق في موقع Can I use.
التعرّف على تفضيلات المستخدم في وقت الطلب
يسمح عنوان حقول معلومات العميل 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);
}
مثال كامل
في النسخة التجريبية المضمّنة التالية، يمكنك الاطّلاع على المثال الكامل الذي يوضّح كيفية تطبيق المفاهيم المذكورة أعلاه. جرِّب تفعيل الوضع الداكن في إعدادات نظام التشغيل وانظر كيف تتفاعل الصفحة.
تأثير التحميل
عند تجربة هذا المثال، يمكنك معرفة سبب تحميل dark.css وlight.css من خلال الاستعلامات عن الوسائط.
جرِّب تفعيل الوضع الداكن وإعادة تحميل الصفحة:
يتم تحميل أوراق الأنماط غير المتطابقة حاليًا، ولكن بأقل أولوية،
بحيث لا تتنافس أبدًا مع الموارد التي يحتاجها الموقع الإلكتروني في الوقت الحالي.
prefers-color-scheme.التفاعل مع تغييرات الوضع الداكن
مثل أي تغيير آخر في الاستعلام عن الوسائط، يمكن الاشتراك في تغييرات الوضع الداكن من خلال 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. سيتم اختيار أول عنوان يتطابق مع عنوان URL. على سبيل المثال، يمكنك استخدام لون واحد
للوضع الفاتح وآخر للوضع الداكن. في وقت كتابة هذا الدليل، لا يمكنك
تحديد هذه العناصر في بيان التطبيق. يُرجى الاطّلاع على مشكلة GitHub رقم 975 في w3c/manifest.
<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 pseudo-class.
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 المضمَّنة، بدلاً من استخدام فلاتر العكس،
يمكنك الاستفادة من الكلمة الرئيسية في CSS currentColor
التي تمثّل قيمة السمة color للعنصر.
يتيح لك ذلك استخدام القيمة color في المواقع التي لا تتلقّاها تلقائيًا.
ومن المفيد أنّه إذا تم استخدام currentColor كقيمة لسمات SVG
fill أو stroke،
تأخذ القيمة من القيمة المكتسبة لسمة اللون بدلاً من ذلك.
والأفضل من ذلك: أنّ هذه الميزة تعمل أيضًا مع
<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> في الوضع الفاتح
<dark-mode-toggle> في الوضع الداكن
جرِّب النقر على عناصر التحكّم في الوضع الداكن في أعلى يسار الصفحة في العرض التوضيحي التالي. إذا وضعت علامة في مربّع الاختيار في عنصر التحكّم الثالث والرابع، يمكنك ملاحظة كيف يتم تذكُّر اختيارك للوضع حتى عند إعادة تحميل الصفحة. يتيح ذلك للزوّار إبقاء نظام التشغيل في الوضع الداكن، ولكن الاستمتاع بموقعك الإلكتروني في الوضع الفاتح أو العكس.
الاستنتاجات
إنّ العمل مع الوضع الداكن وإتاحته أمر ممتع ويفتح آفاقًا جديدة للتصميم.
بالنسبة إلى بعض الزوّار، قد يكون هذا هو الفارق بين عدم القدرة على التعامل مع موقعك الإلكتروني
وأن يكونوا مستخدمين سعداء.
هناك بعض المشاكل التي قد تواجهك، لذا من الضروري إجراء اختبار دقيق،
ولكنّ الوضع الداكن هو بالتأكيد فرصة رائعة لإظهار اهتمامك بجميع المستخدمين.
إنّ أفضل الممارسات المذكورة في هذه المقالة والمساعدين مثل العنصر المخصّص <dark-mode-toggle> من شأنها أن تمنحك الثقة في قدرتك على إنشاء تجربة رائعة في الوضع الداكن.
أخبرني على Twitter بما تنشئه وما إذا كانت هذه المشاركة مفيدة أو إذا كانت لديك اقتراحات لتحسينها.
شكرًا على القراءة. 🌒
روابط ذات صلة
مراجع للاستعلام عن الوسائط prefers-color-scheme:
مراجع حول العلامة الوصفية color-scheme وخاصية CSS:
- سمة CSS والعلامة الوصفية
color-scheme - صفحة Chrome Platform Status
- خطأ في Chromium
- مواصفات المستوى 1 من وحدة ضبط الألوان في CSS
- مشكلة GitHub في مجموعة عمل CSS بشأن العلامة الوصفية وخاصية CSS
- مشكلة HTML WHATWG GitHub بشأن العلامة الوصفية
روابط عامة حول "الوضع الداكن":
- التصميم المتعدد الأبعاد: المظهر الداكن
- الوضع الداكن في Web Inspector
- دعم "الوضع الداكن" في WebKit
- إرشادات واجهة المستخدم من Apple: الوضع الداكن
مقالات بحثية أساسية لهذا المنشور:
- ما هي وظيفة "supported-color-schemes" في الوضع الداكن؟ 🤔
- استمتِع بالمظهر الداكن. 🌚 ربما…
- إعادة التلوين في "الوضع الداكن"
الإقرارات
ميزة الوسائط prefers-color-scheme وسمة CSS color-scheme والعلامة الوصفية ذات الصلة هي من تنفيذ 👏 رون ليلسفين.
يشارك "رون" أيضًا في تحرير مواصفات المستوى 1 من وحدة ضبط ألوان CSS.
أودّ 🙏 شكر لوكاس زبيلوت
وروان ميريوود
وشيراغ ديساي
وروب دودسون
على مراجعاتهم الشاملة لهذه المقالة.
استراتيجية التحميل هي من بنات أفكار جيك أرشيبالد.
إميليو كوبوس ألفاريز وجّهني إلى طريقة رصد prefers-color-scheme الصحيحة.
تم تقديم النصيحة بشأن ملفات SVG المُشار إليها وcurrentColor من قِبل تيموثي هاتشر.
أخيرًا، أودّ أن أشكر المشاركين المجهولين في دراسات المستخدمين المختلفة
الذين ساعدوا في صياغة الاقتراحات الواردة في هذه المقالة.