👨🏼‍🍳 ✍🏿 ⚖️ الوضع المظلم: مرحبًا بالظلام ، صديقي القديم 👩🏻‍🎨 👨🏼‍🚀 👸🏾

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

مجرد ضجيج أم ضرورة؟ تعرف على المزيد حول الوضع المظلم. سأوضح لك كيفية إضافة دعم الوضع المظلم لصالح المستخدمين!

المقدمة

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

الوضع المظلم قبل أن يصبح سائدًا

الشاشة الخضراء ( المصدر )

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

الظلام على الأبيض ( المصدر )

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

Browser WorldWideWeb ( مصدر )

في هذه المرحلة من التصميم ، وُلد اتجاه "الظلام على الأبيض" ، وتم تنفيذه في مواقع الويب الأولى على الشبكة - كانت أشبه بالمستندات النصية.

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

استخدام الهواتف الذكية ( المصدر ) لقد

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

لماذا تختار Dark Mode؟

لأسباب جمالية

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

اكتشف المزيد في الدراسة لماذا يحب الناس الوضع المظلم وكيفية استخدامه.

System 7 CloseView ( المصدر )

Dark Mode كأداة للوصول للأشخاص ذوي الإعاقة

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

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

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

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

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

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

الآن بعد أن غطيت سبب أهمية الوضع المظلم للعديد من المستخدمين ، دعنا نلقي نظرة على كيفية تخصيصه.

إعدادات المظهر الداكن على

أنظمة تشغيل Android Q التي تدعم الوضع المظلم أو السمة الداكنة عادةً ما يكون لها خيار تنشيطها في الإعدادات. في نظام التشغيل macOS X ، يوجد هذا ضمن القسم العام في تفضيلات النظام ويسمى المظهر ( لقطة شاشة ) ، وفي نظام التشغيل Windows 10 ، يوجد ضمن "الألوان" تسمى اختر لونك ( لقطة شاشة ). بالنسبة إلى Android Q ، يمكنك تبديل الوضع إلى العرض كـ Dark Theme ( لقطة شاشة ) ، وفي iOS 13 ، يمكنك تغيير لون الواجهة في قسم العرض والسطوع ( لقطة شاشة ).

- prefers-color-scheme

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

خصائص وسائط CSS ذات الحركة المختصرة لتحديد ما إذا كان المستخدم يطلب من نظام التشغيل تقليل مقدار الرسوم المتحركة التي يستخدمها. فعلت مسبقاكتب عن يفضل الحركة المنخفضة في وقت سابق. تُستخدم

خاصية وسائط CSS الخاصة بنظام الألوان المفضّل لتحديد السمة ، الفاتحة أو الداكنة ، التي يستخدمها أي شخص في نظام التشغيل. يعمل بالقيم التالية:

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

دعم الوضع المظلم

اكتشف ما إذا كان الوضع المظلم يدعمه المتصفح

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

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

في وقت كتابة هذا التقرير ، كان نظام الألوان المفضل مدعومًا على كل من سطح المكتب والجوال (عند توفره) في Chrome و Edge من الإصدار 76 و Firefox من الإصدار 67 و Safari من الإصدار 12.1 على macOS ومن الإصدار 13 على iOS. بالنسبة لجميع المتصفحات الأخرى ، يمكنك العثور على معلومات في المقالة هل يمكنني استخدام جداول الدعم .

يتوفر عنصر <dark-mode-toggle> مخصص يضيف دعم الوضع المظلم للمتصفحات القديمة. سوف أكتب عن هذا أكثر.

الوضع المظلم في الممارسة

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

يحتوي style.css على قواعد عامة يتم استخدامها في جميع أنحاء الموقع
يحتوي dark.css على القواعد اللازمة للوضع المظلم
يحتوي light.css على القواعد اللازمة لوضع الضوء فقط.

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

يتم تحميل الأخيرين ، light.css و dark.css ، بشكل انتقائي عبر طلب <link media>.

في البداية ، لا تدعم جميع المتصفحات خاصية وسائط CSS ذات مخطط الألوان المفضل (الموجودة في المثال أعلاه ) ، يتم حل ذلك عن طريق تحديد light.css الافتراضي عبر عنصر في البرنامج النصي المضمّن لدينا (الضوء اختيار عشوائي ، ويمكنني أيضًا تعتيم بواسطة إفتراضي). لتجنب ظهور محتوى غير منظم ، أقوم بإخفاء محتوى الصفحة حتى يتم تحميل 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)').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: no-preference), (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 أستخدم هذه المتغيرات في الجسم {...} . نظرًا لأنه تم تعريفها في فئة CSS الزائفة : الجذر - محدد يمثل في HTML عنصر <html> ومطابقًا لمحدد html ، باستثناء أن خصوصيته أعلى: المتغيرات متتالية ، مما يسمح بتعريف متغيرات CSS العامة.

/* style.css */
:root {
  color-scheme: light dark;
}
body {
  color: var(--color);
  background-color: var(--background-color);
}

في المثال أعلاه ، ربما لاحظت خاصية مخطط الألوان بقيم داكنة فاتحة مفصولة بمسافة.

تخبر الخاصية المتصفح بموضوعات الألوان التي يدعمها تطبيقي وتسمح له بتنشيط أشكال خاصة من ورقة أنماط وكيل المستخدم. هذا مفيد ، على سبيل المثال ، للسماح للمتصفح بعرض حقول النموذج بخلفية داكنة ونص فاتح ، أو تخصيص أشرطة التمرير ، أو لتمكين لون تمييز خاص بالموضوع. يتم تحديد تفاصيل خاصية نظام الألوان في CSS Color Adjustment Module Level 1 .

تعرف على المزيد حول نظام الألوان .

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

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

تحليل تفصيلي

في المربع التالي Glitch ، يمكنك رؤية مثال يستخدم كل ما هو موصوف أعلاه ، في الممارسة العملية. حاول تبديل الوضع الداكن في إعدادات نظام التشغيل الخاص بك وشاهد كيف تتفاعل الصفحة.

التأثير على سرعة التنزيل

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

اكتشف سبب تحميل المتصفحات لأوراق الأنماط باستعلامات وسائط غير متطابقة .

يقوم موقع الويب الخفيف بتحميل

الأنماط الداكنة الأقل أولوية: يقوم موقع الويب المظلم بتحميل أنماط الإضاءة الأقل أولوية:

الموقع الافتراضي ذو الجلد الفاتح في المستعرض الذي لا يدعم نظام الألوان المفضل يقوم بتحميل الأنماط الداكنة ذات الأولوية الأقل:

كيفية الاستجابة لتغيرات الوضع المظلم

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

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

أفضل ممارسات الوضع الداكن

تجنب

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

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

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

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

تم قلب الرمز في الوضع المظلم:

الرمز في وضع الإضاءة:

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

/* 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 ، والتي تمثل قيمة لون العنصر.

يسمح لك هذا بتعيين قيمة اللون للخصائص التي لا تستقبلها افتراضيًا. في الواقع، إذا تم استخدام currentColor كقيمة ل SVG ملء أو السكتة الدماغية سمات ، ثم يأخذ قيمته من الممتلكات اللون الموروثة. يعمل هذا أيضًا مع <svg> <use href = "…"> </svg> ، لذلك يمكنك الحصول على موارد منفصلة وسيظل تطبيق currentColor في السياق. لاحظ أن هذا يعمل فقط مع مضمّن أو <استخدام href = "...">SVG ، ولكن ليس لـ SVG ، والتي يشار إليها باسم src الصور أو عبر CSS. مزيد من التفاصيل هنا .

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

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

يمكن تسهيل التبديل من الظلام إلى الفاتح أو العكس نظرًا لحقيقة أن اللون والخلفية هما خصائص CSS قابلة للتحريك . الرسوم المتحركة سهلة مثل الإعلان عن انتقاليتين لخاصيتين. يوضح المثال أدناه الفكرة العامة.

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);
}

تصميم فني مع الوضع المظلم

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

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

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

الوضع المظلم المعطل

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

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

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

<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 والحفاظ عليه ممتع! تفتح إمكانيات جديدة للتصميم. يمكن أن يجعل اختيار الوضع المظلم المستخدم أكثر سعادة. نعم ، هناك عيوب وهناك حاجة إلى اختبار صارم ، لكن الوضع المظلم يعد فرصة رائعة لإظهار اهتمامك بمستخدميك. يجب أن تساعدك أفضل الممارسات المذكورة في هذه المقالة واختراق الحياة مثل عنصر <dark-mode-toggle> المخصص في إنشاء وضع مظلم رائع.

روابط مفيدة

استعلام وسائط مخطط الألوان المفضل :

العلامة الوصفية لنظام الألوان :

dark mode:

الوضع المظلم: مرحبًا بالظلام ، صديقي القديم