مقدمة

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

فهم الكشف عن الوضع الداكن

مع شعبية الوضع المظلم، تقدم العديد من مواقع الويب والتطبيقات الآن سمات تتوافق مع تفضيلات نظام المستخدم. يتم تحقيق هذه الميزة باستخدام matchMedia API في JavaScript، والتي تسمح لتطبيقات الويب بالاستجابة للتغيرات في استعلامات الوسائط، مثل تفضيلات نظام الألوان للمستخدم.

كيف يعمل

واجهة برمجة تطبيقات matchMedia

توفر طريقة window.matchMedia طريقة لتقييم استعلامات الوسائط وتكييف مظهر موقعك بناءً على تفضيلات المستخدم. للتحقق من تمكين الوضع المظلم، يمكنك استخدام وظيفة JavaScript التالية:

// Check if the user prefers dark mode
function isDarkMode() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

التنفيذ العملي

index.html

    
Hello, World!

    
    

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

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

تابعني على جيثب أفيناش تاري