كيفية اكتشاف نظام الألوان المفضل للمستخدم في JavaScript

في الإصدارات الأخيرة من macOS (Mojave) و Windows 10 ، تمكن المستخدمون من تمكين وضع مظلم على مستوى النظام. هذا يعمل بشكل جيد ويسهل اكتشافه للتطبيقات الأصلية.

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

هل سيكون من الممكن إجراء هذا الكشف تلقائيًا وجعل مواقع الويب تقدم سمة تحترم تفضيل المستخدم؟

ضوء مقابل الظلام موضوع في متصفح Neo4j

استعلام وسائط CSS draft يفضل مسودة نظام الألوان

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

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

دعم متصفح الويب اعتبارًا من مارس 2019

دعم المتصفح الحالي محدود للغاية ، وهو غير متوفر في أي من الإصدارات الثابتة لأي بائع. يمكننا الاستمتاع بهذا فقط في Safari Technology Preview من الإصدار 12.1 وفي Firefox 67.0a1. ما هو رائع أن هناك ثنائيات تدعمها ، حتى نتمكن من العمل معها وتجربتها في متصفحات الويب. للحصول على دعم المتصفح الحالي ، تحقق من https://caniuse.com/#search=prefers-color-scheme.

لماذا لا يكون اكتشاف CSS فقط كافيًا

تتمثل الطريقة الشائعة التي رأيتها حتى الآن في استخدام نهج CSS فقط وتجاوز قواعد CSS لفئات معينة عند مطابقة استعلام وسائط.
شيء من هذا القبيل:

/ * global.css * /
.الموضوع {
  العرض محجوب؛
  العرض: 10em ؛
  الارتفاع: 10 م ؛
  الخلفية: أسود.
  اللون الابيض؛
}
media (يفضل نظام الألوان: light) {
  .الموضوع {
    الخلفية: أبيض.
    لون أسود؛
  }
}

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

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

نهج JS الأولي

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

شيء من هذا القبيل:

لذلك عندما يقوم المستخدم بتحميل CSS ويتطابق استعلام الوسائط مع أحد أنظمة الألوان المذكورة أعلاه ، يتم تعيين قيمة خاصية المحتوى لعنصر html على "light" أو "dark".

السؤال إذن هو كيف نقرأ قيمة محتوى عنصر html؟

يمكننا استخدام window.getComputedStyle ، مثل هذا:

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

رد الفعل نهج شبيبة

كيف يمكننا معرفة متى يغير المستخدم نظام ألوان النظام؟ هل هناك أي أحداث يمكننا الاستماع إليها؟

نعم هناك!

هناك window.matchMedia المتاحة في متصفحات الويب الحديثة.

ما هو رائع مع matchMedia هو أنه يمكننا إرفاق مستمع إليها والذي سيتم استدعاؤه في أي وقت تتغير فيه المباراة.

سيتم استدعاء المستمع بكائن يحتوي على المعلومات إذا بدأ استعلام الوسائط في المطابقة أو إذا توقف عن المطابقة. باستخدام هذه المعلومات ، يمكننا تخطي CSS تمامًا والعمل فقط مع JS.

هذا النهج يعمل بشكل جيد بالفعل في متصفحات الويب المدعومة ويختار فقط إذا لم يكن window.matchMedia مدعومًا.

رد فعل هوك

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

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

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

ثم استخدمه مثل هذا في طبقة التطبيق:

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

النتيجة النهائية

إليك صورة gif لها النتيجة النهائية ، وكما ترون ، إنها لحظة.

افكار اخيرة

لقد كانت هذه تجربة ممتعة تم إجراؤها أثناء ما يسمى بـ "يوم المختبر" لدينا في فريق UX في Neo4j. المراحل المبكرة من المواصفات و (لذلك) عدم وجود دعم للمتصفح لا تبرر ذلك لجعله في أي منتج حتى الآن. لكن الدعم قد يأتي في وقت أقرب من ذلك.

وإلى جانب ذلك ، نحن نقوم بشحن بعض المنتجات المستندة إلى الإلكترون ، وهناك electron.systemPreferences.isDarkMode () متاح هناك ...

عن المؤلف

أوسكار هان هو قائد فريق / مهندس كبير في Neo4j.
وهو يعمل على العديد من تطبيقات المستخدم النهائي ومكتبات الأكواد الخاصة بـ Neo4j: وهو مؤلف كتابين تقنيين.

اتبع أوسكار على تويتر: أوسكارهان