تطبيق عملي بسيط لخاصية الواجهة المظلمة ( 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; }
}
و حتى لو قدرت تسمح له يبدل بين النسختين الدارك مود و اللايت مود بالـ CSS فقط بدون الجافا سكربت ( ممكن على فكرة عن طريق إضافة checkbox input و التبديل يتم حسب حالته checked / unchecked ) هتفضل نقطة أخيرة و هي حفظ خيار المستخدم على المتصفح في الكوكيز أو على اللوكال ستورج عشان يثبت اختياره أثناء تصفحه لباقي صفحات الموقع أو لما يكرر الزيارة
لكن الكود بتاعك و الاعتماد على السي اس اس ممكن يكون فقط كـ initial state لحالة الموقع , يعني لو دخل الموقع و هو ظابط جهازه على الدارك مود يتعرض الموقع تلقائيا بالدارك مود , مع إتاحة التبديل و حفظ الاختيار بالجافا سكربت