تفعيل الوضع الداكن أو إيقافه

ميزات الويب: color-scheme الاستعلام عن الوسائط prefers-color-scheme ()light-dark ()has:

يتيح زرّ تفعيل "الوضع الداكن" للمستخدمين إلغاء ألوان النظام لموقع إلكتروني واحد. يتم تطبيق الإعدادات البديلة من خلال تعديل <meta name="color-scheme">: light dark تعني "اتّباع الإعدادات المفضّلة للنظام"، وlight أو dark لتثبيت نظام ألوان صريح. تعتمد الألوان (light-dark()) وألوان النظام وواجهة المستخدم الأصلية على السمة color-scheme في CSS، لذا يعمل مفتاح التبديل من خلال إبقاء هذه السمة متزامنة مع <meta> (يُرجى الاطّلاع على تطبيق التجاوز في CSS).

هل يجب أن يكون زر التبديل ثابتًا، أم يجب أن يكون عنصر تحكّم في الإعدادات، أم يجب ألا يكون هناك زر تبديل على الإطلاق؟

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

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

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

التنفيذ

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

نموذج بيانات

يتضمّن نموذج البيانات الخاص بزرّ تفعيل الوضع الداكن عادةً ثلاث حالات:

  1. النظام (بدون قيمة مخزَّنة): تتّبع واجهة المستخدم نظام ألوان النظام. من الأفضل أن يكون هذا هو الخيار التلقائي.
  2. فاتح (يتم تخزينه على النحو التالي: "light"): تستخدم واجهة المستخدم المظهر الفاتح بغض النظر عن الألوان المستخدَمة في النظام.
  3. داكن (يتم تخزينه على النحو التالي: "dark"): تستخدم واجهة المستخدم المظهر الداكن بغض النظر عن الألوان المستخدَمة في النظام.

يتم تخزين هذه الحالة عادةً في localStorage وتظهر في عنصر <meta name="color-scheme"> في رأس المستند.

تطبيق التجاوز في CSS

السمة <meta> هي مجرد تلميح للعرض: أي بيان color-scheme في CSS للمؤلف يلغيها. بما أنّ الوضع الداكن يضبط السمة color-scheme: light dark على :root، فإنّ تعديل السمة <meta> وحدها لا يؤدي إلى أي نتيجة، لأنّ الأولوية تكون للغة CSS. أعِد ربط <meta> بالموقع كي يتبعه التدرّج:

:root {
  color-scheme: light dark;

  &:has(> head > meta[name="color-scheme"][content="dark"]) {
    color-scheme: dark;
  }
  &:has(> head > meta[name="color-scheme"][content="light"]) {
    color-scheme: light;
  }
}

لا تضع ترميزًا ثابتًا لـ color-scheme: light أو color-scheme: dark كإعداد تلقائي للجذر، ويجب أن يظل الإعلان الأساسي light dark. يجب ألا تعتمد CSS على JS: إذا لم يتم تشغيل JS مطلقًا، فستبقى <meta> light dark ويتبع الموقع الإعدادات المفضّلة للنظام، ولن يتعطّل أي شيء.

الاستمرارية ومنع ظهور المحتوى غير المنسَّق (FOUC)

يجب الاحتفاظ بالتجاوز في localStorage، وإزالة الإدخال عند العودة إلى الإعدادات التلقائية للنظام.

لتجنُّب ظهور وميض المخطط الخاطئ، طبِّق القيمة المخزَّنة في نص برمجي مضمّن (وليس type=module أو defer) يتم وضعه بعد العنصر <meta> مباشرةً:

<meta name="color-scheme" content="light dark">
<script>
document.querySelector('meta[name="color-scheme"]').content = localStorage.getItem("color-scheme") ?? "light dark";
</script>
  • هذا النص البرمجي المضمّن متوفّر فقط لمنع ظهور المحتوى غير المنسَّق (FOUC). اجعلها صغيرة قدر الإمكان، ويمكن تحميل ملفات JS الإضافية للتعامل مع تبديل نظام الألوان لاحقًا.
  • في حالات نادرة، يمكن أن يؤدي الوصول إلى localStorage إلى حدوث خطأ (مثل حظر بيانات الموقع الإلكتروني)، ولكن بما أنّ هذا النص البرمجي لا ينفّذ أي إجراء آخر، سيكون التأثير الجانبي الوحيد هو ظهور خطأ في وحدة التحكّم. يمكنك تضمينها في try .. catch إذا كان ذلك مهمًا. تأكَّد من أنّ المظهر لا يزال مطبَّقًا على الصفحة، حتى إذا لم يكن من الممكن الاحتفاظ به.
  • يمكن أن يتغيّر الإلغاء من علامة تبويب أخرى: يمكنك معالجة حدث storage في window للبقاء متزامنًا.
  • لا تستخدِم matchMedia() لإزالة القيمة المخزّنة عندما يتغيّر الإعداد المفضّل للنظام ليتطابق معها. تُبدّل أنظمة تشغيل العديد من المستخدمين المخططات تلقائيًا استنادًا إلى الوقت من اليوم، وإزالة القيمة المخزّنة كلما حدث تطابق بين الاثنين سيجعل من المستحيل تثبيت مخطط على الإطلاق.

التفرّع لقيم HTML والقيم غير اللونية

لا تتطلّب الألوان أي عمل إضافي: بعد ربط <meta> بـ color-scheme (أعلاه)، يتّبع light-dark() عملية الإلغاء. يتناول هذا القسم كيفية تكييف القيم الأخرى (مثل font-weight ومصادر الوسائط وما إلى ذلك).

عندما تتبع الصفحة الإعدادات المفضّلة للنظام، يمكن استخدام (prefers-color-scheme: dark) للتفرّع، بما في ذلك في مصادر <picture> أو <video>. يؤدي إلغاء نظام الألوان إلى تعقيد إضافي: لم يعُد الإعداد المفضّل للنظام هو المصدر الموثوق، وبالنسبة إلى واجهات برمجة التطبيقات التي تقبل الاستعلامات عن الوسائط فقط، لا يتوفّر بديل مباشر.

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

يمكنك دمج الاستعلام عن الوسائط مع أداة اختيار :root:has(> head > meta[name="color-scheme"][content="dark"]) (أو light) لإنشاء فرع. يمكنك الاطّلاع على مجموعات أدوات الاختيار وقواعد @ للحصول على تفاصيل حول كيفية تنفيذ ذلك بشكل أنيق.

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

بالنسبة إلى الوسائط المضمّنة في HTML، الطريقة الوحيدة حاليًا هي تضمين كلا الإصدارَين كعناصر منفصلة وتبديل مستوى الظهور بشكل مناسب. لا يمكن إخفاء عناصر <source> باستخدام display: none.

واجهة المستخدم

هل هناك حالتان أم ثلاث حالات؟

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

يُفضَّل عرض حالتين في مفاتيح التبديل ذات المساحة المحدودة، مثل مفاتيح التبديل الثابتة في واجهة الموقع الإلكتروني (العنوان، وشريط التنقّل، والتذييل، وما إلى ذلك) حيث تكون المساحة محدودة ويكون تعديل الإعدادات عادةً متعامدًا مع هدف المستخدم.

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

يُفضَّل أيضًا استخدام الحالات الثلاث الصريحة إذا كان الموقع الإلكتروني يطبّق أنظمة إضاءة ذكية (مثل وضع الإضاءة الخافتة عندما يكون نظام التشغيل داكنًا)، لأنّ "الفاتح" و "النظام (فاتح حاليًا)" يختلفان بشكل كبير.

مفاتيح تبديل ثنائية الحالة

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

يجب أن تكون الحالتان الوحيدتان هما:

  1. الإعداد التلقائي للنظام: لا يتم تخزين أي قيمة، <meta> المحتوى light dark. يتم عرضها كقيمة تم حلّها حاليًا (على سبيل المثال، رمز شمس عند استخدام المظهر الفاتح).
  2. التجاوز: يتم تخزينها حرفيًا على أنّها light أو dark.

في الأساس، هو عنصر تحكّم ثلاثي الحالات (light dark وlight وdark) حيث لا يمكن الوصول إلى الحالة الصريحة التي تتطابق مع الإعدادات المفضّلة للنظام الحالية.

عندما يفعّل المستخدم:

  1. نظام الألوان المستهدَف: عكس نظام الألوان المعروض حاليًا (القيمة المخزّنة إن وُجدت، وإلا الإعدادات المفضّلة للنظام). نية المستخدم هي "اختيار عكس ما أراه الآن"، وليس "اختيار عكس الإعداد التلقائي للنظام".
  2. إذا كان الهدف يختلف عن الإعدادات المفضّلة الحالية للنظام، يتم تخزينه حرفيًا.
  3. إذا كان الهدف يتطابق مع الإعدادات المفضّلة الحالية للنظام، يعني ذلك أنّ المستخدم يتراجع عن تعديله: أزِل القيمة المخزّنة. لا تخزِّنها، لأنّ ذلك سيؤدي إلى تثبيت المخطط بشكل غير مرئي في مواجهة التغييرات المستقبلية في النظام.
  4. اضبط محتوى "<meta>" على القيمة المخزّنة، أو على "light dark" في حال عدم توفّر قيمة.

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

مثال على سيناريو، بدءًا من ضبط نظام التشغيل على المظهر الفاتح:

  1. يُفعّل المستخدم الميزة. يختلف المظهر الداكن عن الإعدادات المفضّلة للنظام، لذا يتم تخزين dark ويتحوّل الموقع الإلكتروني إلى المظهر الداكن.
  2. يتغيّر إعداد نظام التشغيل إلى المظهر الداكن. يظل الموقع الإلكتروني داكنًا (تتطابق القيمة المخزّنة الآن مع الإعدادات المفضّلة للنظام، ولكن يتم الاحتفاظ بها).
  3. يعود إعداد نظام التشغيل إلى المظهر الفاتح. يظل الموقع الإلكتروني داكنًا.
  4. يُفعّل المستخدم الميزة. يتطابق الهدف (الوضع الفاتح) مع الإعدادات المفضّلة للنظام، لذا تتم إزالة القيمة المخزّنة ويتّبع الموقع الإلكتروني النظام مرة أخرى.

مفاتيح تبديل ثلاثية الحالات

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

لتقليل العبء الإدراكي، يجب أن يعرض خيار "النظام" أيضًا إعدادات النظام الحالية، على سبيل المثال من خلال:

  • رمز، مثل رمز شمس في أسفل يسار رمز النظام
  • نص، مثل "النظام (المظهر الفاتح حاليًا)"