اضافة ميزة الوضع الداكن لموقعك - Dark Mode
هناك الكثير من الطرق لدعم الوضع الداكن في موقعك. ولكن أفضل طريقة لتنشيط الوضع الداكن (الوضع الليلي) في موقعك هو أن تستخدم إمكانية إتباع حالة نظام التشغيل. إن كان الوضع الداكن يعمل في نظام التشغيل الآن، موقعك يصبح داكن. أما إن كان نظام التشغيل يعمل بالوضع العادي (light mode)، موقعك يظهر بالوضع النهاري الأبيض العادي.
إن كنت مفعل الوضع الداكن في موبايلك أو اللابتوب الذي تقرأ به هذا الشرح، سيظهر لك موقع أبانوب حنا للبرمجيات بالوضع الداكن (dark mode). أما إن كنت تتصفح الموقع وجهازك يعمل بالوضع الأبيض العادي، سترى الموقع بالوضع النهاري العادي. هذه طريقة جميلة ولا تحتاج إلى أى خطوات أو اختيارات من المستخدم. لذلك أنا أرى أنها الطريقة الأفضل لإضافة الوضع الدكن لموقعك.
خطوات إضافة الوضع الداكن لموقعك 🔗
استخدم هذا الكود في لغة CSS الخاصة بتنسيق مواقع الويب.
@media (prefers-color-scheme: dark){
/* (night mode) dark mode css styles */
}
لو كان الوضع الليلي الداكن مفعل في الجهاز الذي يشاهد موقعك، سوف يستخدم المتصفح تنسيقات الـ CSS الموجودة في الكود السابق. لذلك ضع كل تنسيقات الألوان الخاصة بالثيم الأسود لموقعك.
أما تنسيقات الوضع النهاري الأبيض العادي، ضعها في الكود التالي.
@media (prefers-color-scheme: light){
/* (light mode) day mode css styles */
}
هذه التنسيقات يتم العمل بها في حالة أن الجهاز والمتصفح يعملان بالوضع النهاري المعتاد.
هل هناك طرق أخرى لتفعيل الوضع الداكن على الموقع؟ 🔗
نعم، يمكنك أن تستخدم ملفين للتنسيقات (2 stylesheets) وتستخدم كود جافاسكربت للتبديل بين الملفين على حسب اختيار المستخدم من خلال زر.
وهناك طريقة أخرى أعتبرها أكثر ذكاءاً وهي استخدام المتغيرات في لغة CSS وتبديل المتغيرات بإستخدام لغة جافاسكربت بدلاً من تغيير ملف التنسيق بالكامل.
ولكني أرى أن الموقع لابد أن يتبع المتصفح ونظام التشغيل. ليس على المستخدم أن يختار الوضع الداكن أو الوضع المضيء في كل موقع يزوره!! من المفترض أن يختار الوضع الداكن أو الوضع المضئ داخل إعدادات نظام التشغيل ومن ثم كل البرامج والتطبيقات تتبع هذا التغير، وأيضاً المواقع داخل المتصفح تتبع هذا التغير تلقائياً.
انتهينا من الحديث عن كود دعم الوضع الداكن على موقعك. لمزيد من المعلومات عن البرمجة ولينكس وأندرويد وويندوز وماك وآيفون وتصميم المواقع، ابحث عن “موقع أبانوب حنا للبرمجيات” على جوجل وادخل للموقع وستجد موضوع جديد يشرح فكرة أو معلومة جميلة ومفيدة كل يوم.
