أصبح الوضع الليلي (Dark Mode) واحدًا من أهم المميزات التي يبحث عنها المستخدمون عند تصفح المواقع والمدونات، فهو يوفر تجربة قراءة مريحة للعين، خاصة في الأماكن المظلمة أو أثناء الليل. إذا كنت تمتلك مدونة على بلوجر وترغب في إضافة هذه الميزة لزوارك، فالأمر بسيط جدًا ولا يحتاج إلى خبرة برمجية كبيرة. في هذا المقال سنشرح لك خطوة بخطوة كيفية إضافة الوضع الليلي لمدونتك.
1. لماذا تحتاج إلى الوضع الليلي؟
-
راحة العين: يقلل من الإجهاد البصري أثناء القراءة في الظلام.
-
جمالية التصميم: يضيف مظهرًا عصريًا وجذابًا لمدونتك.
-
خيارات للزوار: بعض القراء يفضلون الوضع الليلي دائمًا، والبعض الآخر يفضل الوضع العادي، لذلك إتاحة الخيار لهم يزيد من رضاهم.
-
تقليل استهلاك البطارية: على الأجهزة التي تدعم شاشات OLED.
2. إضافة زر التبديل للوضع الليلي
أول خطوة هي إضافة زر يسمح للزائر بالتبديل بين الوضع العادي والليلي.
يمكنك وضع الكود التالي داخل قالب بلوجر، مباشرة بعد وسم <body>:
<button id="darkModeToggle" style="position:fixed;bottom:20px;left:20px;z-index:9999;padding:10px 15px;border:none;border-radius:5px;background:#333;color:#fff;cursor:pointer;">
🌙 الوضع الليلي
</button>
3. كتابة أكواد CSS الخاصة بالوضع الليلي
الآن سنضيف أكواد CSS لتغيير ألوان الموقع عند تفعيل الوضع الليلي.
ابحث في القالب عن وسم <style> أو <b:skin> ثم أضف:
body.dark-mode {
background: #121212 !important;
color: #e0e0e0 !important;
}
body.dark-mode a {
color: #80cbc4 !important;
}
body.dark-mode header,
body.dark-mode footer,
body.dark-mode .widget {
background: #1e1e1e !important;
color: #ffffff !important;
}
يمكنك تعديل الألوان بما يتناسب مع ذوقك أو تصميم مدونتك.
4. إضافة كود JavaScript للتبديل والحفظ
الآن نحتاج إلى كود JavaScript ليقوم بتفعيل الوضع الليلي عند الضغط على الزر، وكذلك حفظ تفضيلات الزائر في المتصفح حتى لا يضطر لإعادة التفعيل في كل زيارة.
قبل وسم </body> مباشرة أضف الكود التالي:
<script>
document.getElementById("darkModeToggle").addEventListener("click", function () {
document.body.classList.toggle("dark-mode");
if (document.body.classList.contains("dark-mode")) {
localStorage.setItem("darkMode", "enabled");
} else {
localStorage.setItem("darkMode", "disabled");
}
});
if (localStorage.getItem("darkMode") === "enabled") {
document.body.classList.add("dark-mode");
}
</script>
5. تجربة الوضع الليلي
بعد حفظ التعديلات، قم بتحديث مدونتك وستجد زرًا في أسفل الشاشة. عند الضغط عليه، ستتحول المدونة إلى الوضع الليلي، وعند العودة للوضع العادي يمكن الضغط مرة أخرى. والأجمل من ذلك أن الزائر إذا فعّل الوضع الليلي ثم خرج من الموقع، سيبقى مفعلاً عند عودته مرة أخرى.
الخلاصة
إضافة الوضع الليلي لمدونات بلوجر ميزة مهمة تعطي موقعك لمسة احترافية وتساعد الزوار على تصفح المحتوى براحة أكبر. كل ما تحتاجه هو بضعة أسطر من الأكواد، وستحصل على نتيجة مبهرة.
✨ جربها الآن وامنح زوارك تجربة قراءة أفضل!
