رسالة الموقع

تطبيق عملي بسيط لخاصية الواجهة المظلمة ( Dark Mode )

dark mode الواجهة المظلمة أو الـ dark-mode اصبحت منتشرة جدا في الكثير من المواقع و التطبيقات , ولحسن الحظ إضافتها لموقعك عملية في منتهى السهولة و يمكن أن تتم بشكل بسيط جدا بحيث تكون مجرد كتابة عدة أسطر بالـ CSS فقط , ولكن لتنفيذ خاصية الدارك مود بشكل أكثر احترافية نحتاج لبعض المساعدة من لغة الجافا سكربت لتقديم تجربة استخدام أكثر احترافية 💪
    

ما هي الواجهة المظلمة Dark Mode ؟

الواجهة المظلمة dark mode هي مجرد استخدام للألوان المضيئة ( البيضاء ) للنصوص و اﻷيقونات و العناصر الرسومية اﻷساسية , على خلفية سوداء أو داكنة اللون بهدف تقديم واجهة استخدام أكثر راحة للعين مساءا أو في اﻷماكن المعتمة , وكذلك يمكن استخدام الواجهة المظلمة لتوفير طاقة بطارية الموبايل أو التابلت حيث أنها تستهلك طاقة أقل ( في معظم الحالات ).

    

خطوات التنفيذ

1- إعداد خصائص الـ CSS للواجهة المظلمة

يمكن كما قلنا تلخيص خصائص الواجهة المظلمة كما قلنا في ( خلفية معتمة و عناصر مضيئة ) و هو تقريبا عكس الوضع العادي Light Mode , و لتحويل هذا الكلام إلى كود بلغة الـ CSS نستطيع إنشاء كلاس جديد للوضع الليلي , هذا الكلاس سيتم تطبيقه على عنصر body الرئيسي بالصفحة و هو الذي سيتولي تحويل معظم عناصر الصفحة من وضع الـ Light Mode إلى الوضع الليلي Dark Mode
.darkMode{
    color: #fff;
    background-color: #222;
}
    

و لكن ستبقى مجموعة من العناصر التي تحمل خصائص معينة نحتاج للتعديل عليها بشكل منفرد , وذلك ﻷنها تحمل بالفعل خصائص مناسبة فقط للوضع العادي , و التعديل على هذه العناصر سيكون بإضافة مجموعة قواعد CSS جديدة لها تتحقق من وقوع هذه العناصر داخل عنصر يحمل كلاس darkMode ( في حالتنا هنا الـ body ) و عندها يتم تطبيق القواعد الجديدة المناسبة للوضع الليلي
.darkMode .title{
    color: #FFC124;
}

.darkMode .btn-toggleMode{
    color: #222;
    background-color: #ddd;
}
.btn-toggleMode:hover, .btn-toggleMode:focus{
    background-color: #aaa;
}
    

إلى هنا نكون انتهينا من الـ CSS و بقي فقط إدارة عملية التبديل بين الوضعين الليلي و النهاري , و هنا يأتي دور الجافا سكربت
        
        

2- إنشاء دالة الجافا سكربت للتبديل بين الوضعين Light Mode / Dark Mode

سوف نقوم بكتابة دالة بلغة الجافا سكربت يتم تفعيلها ( طلبها ) كلما تم الضغط على زر التبديل بين الوضعين الليلي و النهاري , هذه الدالة ستقوم بالآتي :
        
- تحديد الوضع الحالي لواجهة الموقع ( مظلمة / مضيئة )
- تبديل الوضع الحالي لواجهة الموقع عن طريق إضافة أو حذف الكلاس darkMode لعنصر الصفحة body
- تسجيل كعكة cookie على جهاز المستخدم في حالة استخدامه للواجهة المظلمة , وحذف الكعكة ( إن وجدت ) في حالة استخدامه للواجهة المضيئة
- تبديل النص و اﻷيقونة في زر تحويل الوضع من ليلي إلى نهاري
function darkMode_toggle() {
    if (document.body.classList.contains('darkMode')) {
        document.body.classList.remove("darkMode");
        document.querySelector('.btn-toggleMode').innerHTML = '<i class="fas fa-moon"></i> Dark Mode';

        setCookie('darkMode', '', 1);

    }else{
        document.body.classList.add("darkMode");
        document.querySelector('.btn-toggleMode').innerHTML = '<i class="fas fa-sun"></i> Light Mode';
        
        setCookie('darkMode', 'yes', 1);
    }
}
    
و اﻵن سنقوم بإنشاء Event Listener و نربطه بزر التبديل بين الوضعين الليلي و النهاري , بحيث يتم طلب و تشغيل الدالة darkMode_toggle عند الضغط على هذا الزر
document.querySelector('.btn-toggleMode').addEventListener("click", () => darkMode_toggle());        
و لتحسين تجربة الاستخدام و تثبيت الوضع الجديد الذي اختاره المستخدم أثناء تنقله بين صفحات الموقع أو عندما يقوم بإعادة الزيارة قمنا بزرع ملف الكعكة cookie في حالة طلبه الواجهة المظلمة , و اﻵن سنقوم بإنشاء دالة ذاتية التشغيل Self-Invoking Function تعمل تلقائيا عند زيارة الموقع , هذه الدالة تبحث عن الكعكة الخاصة بتفعيل الوضع الليلي فإن وجدتها تقوم بطلب الدالة darkMode_toggle لتبديل الوضع الحالي بالوضع الليلي و إن لم تجد كعكة الوضع الليلي لا تقوم بعمل أي شيء فتظل واجهة الموقع أو التطبيق معروضة بنفس التصميم اﻷساسي Light Mode
(function(){
    if (getCookie('darkMode'))
        darkMode_toggle();
})();
    
* ملحوظة
الدالتين setCookie و getCookie خاصتين بالتعامل مع الكعكات cookies فقط , وكود التطبيق العملي بالكامل مرفق و متاح للتحميل مع هذه المشاركة.
function setCookie(name, value, daysToLive) {
    // Encode value in order to escape semicolons, commas, and whitespace
    let cookie = name + "=" + encodeURIComponent(value);
    let age = (typeof daysToLive === "number") ? (daysToLive*24*60*60) : 0;
    
    /* Sets the max-age attribute so that the cookie expires
    after the specified number of days */
    cookie += "; max-age=" + age;
        
    document.cookie = cookie;
}

function getCookie(name) {
    // Split cookie string and get all individual name=value pairs in an array
    let cookieArr = document.cookie.split(";");
    
    // Loop through the array elements
    for(let i=0; i<cookieArr.length; i++) {
        let cookiePair = cookieArr[i].split("=");
        
        /* Removing whitespace at the beginning of the cookie name
        and compare it with the given string */
        if(name == cookiePair[0].trim()) {
            // Decode the cookie value and return
            return decodeURIComponent(cookiePair[1]);
        }
    }
    
    // Return null if not found
    return null;
}
المشاركات اﻷكثر تفاعلا
رائف جمال
احنا ممكن بالسي اس اس و الميديا كويري نعرف هل اليوزر مشغل الدارك مود و ألا لأ و لو مشغلها نعرض الموقع مباشرة بالدارك مود
@media (prefers-color-scheme: light) {
.day.light-scheme { background: white; color: #555; }
.night.light-scheme { background: #eee; color: black; }
}