تركيب زر الوضع المظلم لقالب بلوجر الشكل السابع

طريقة تركيب زر الوضع المظلم لقالب بلوجر

في عصر التصميم الحديث، أصبح تفعيل الوضع المظلم (Dark Mode) في المواقع والمدوّنات أمرًا شائعًا، لما يوفّره من راحة بصرية للمستخدمين، خاصة أثناء التصفح في الإضاءة المنخفضة. لتركيب زر الوضع المظلم في قالب بلوجر، يجب أولاً التوجه إلى لوحة التحكم في بلوجر، ثم اختيار "المظهر"، والضغط على "تعديل HTML".

بعد ذلك، يتم نسخ كود CSS مخصّص للوضع المظلم، والذي يُغيّر ألوان الخلفية والنصوص لتصبح مريحة للعين. يُضاف الكود داخل وسم <style> أعلى القالب، أو ضمن ملف CSS خارجي. بعد ذلك، يتم إدراج كود JavaScript بسيط يُفعّل الوضع المظلم عند الضغط على الزر، ويمكن حفظ التفضيلات باستخدام Local Storage.

يُفضَّل وضع الزر في الهيدر أو الفوتر، وتنسيقه باستخدام CSS ليظهر بشكل جذّاب. بهذه الطريقة، يتمكّن الزائر من التبديل بين الوضع العادي والمظلم بسهولة، مما يُحسّن من تجربة التصفح ويُضفي لمسة احترافية على المدوّنة.

معاينة الأضافة

شرح التركيب بالفيديو

الأكواد الخاصة باضافة تركيب زر الوضع المظلم لقالب بلوجر

بعد الذهاب للمظهر و اختيار تعديل ~~HTML~~ البحث عن ~~</body>~~ و لصق الاكواد التالية اعلاها عن طريق الضغط على ~~Ctrl+f~~

<script>
document.addEventListener('DOMContentLoaded', function() {
const body = document.body;
const toggleBtn = document.getElementById('themeToggle');
const icon = document.getElementById('themeIcon');

let darkMode = localStorage.getItem("theme") === "dark";

function updateIcon() {
icon.classList.remove("bi-brightness-high-fill", "bi-moon-fill");
icon.classList.add(darkMode ? "bi-brightness-high-fill" : "bi-moon-fill");
}

function applyTheme() {
if (darkMode) {
body.classList.add("dark-mode");
} else {
body.classList.remove("dark-mode");
}
updateIcon();
localStorage.setItem("theme", darkMode ? "dark" : "light");
}

toggleBtn.addEventListener("click", () => {
toggleBtn.classList.remove("rotate-button");
void toggleBtn.offsetWidth;
toggleBtn.classList.add("rotate-button");
darkMode = !darkMode;
applyTheme();
});

applyTheme();
});
</script>

ثم نبحث عن ~~</head>~~ و لصق الاكواد التالية اعلاها

<style>
:root{
--text-color:#333333;
--text-color2:#333333;
--bg-color:#ffffff;
--hover-color:#ffd700;
--button-bg:rgba(0,0,0,0.1);
--shadow-color:rgba(0,0,0,0.1);
--card-bg:#f8f9fa}

.dark-mode{--text-color:#f5f5f5;
--text-color2:#df803a;
--bg-color:#121212;
--hover-color:#ffd700;
--button-bg:rgba(255,255,255,0.1);
--shadow-color:rgba(0,0,0,0.3);
--card-bg:#303031
}

/* زر التبديل */
.toggle-theme{position:fixed;bottom:20px;left:20px;background:var(--button-bg);border:none;cursor:pointer;z-index:10000;font-size:2.4rem;color:var(--text-color);transition:all 0.3s ease;padding:10px;border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px var(--shadow-color)}
.toggle-theme:hover #themeIcon.bi-moon-fill{color:#ffffff}
.toggle-theme:hover #themeIcon.bi-brightness-high-fill{color:#ffd700}
.toggle-theme:hover{transform:scale(1.1)}
.toggle-theme:hover #themeIcon{color:var(--hover-color)}
.rotate-button{animation:rotateBtn 0.6s ease}
@keyframes rotateBtn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
body{background-color:var(--bg-color);color:var(--text-color);box-sizing:border-box;position:relative}
a{color:var(--text-color)}

/* تطبيق الألوان على العناصر */

.not-single article{background-color:var(--card-bg);color:var(--text-color)}
aside .widget{background-color:var(--card-bg);color:var(--text-color)}
.outer-title a{color:var(--text-color2)}
</style>

ثم نبحث عن ~~<body>~~ و لصق الاكواد التالية اسفلها مباشرة

<button aria-label='تبديل الوضع المظلم' class='toggle-theme' id='themeToggle'>
<i class='bi bi-moon-fill' id='themeIcon'/>
</button>

و في النهاية اذا لم تكن مكتبة الايقونات الموجودة بالقالب ~~Bootstrap~~ يجب اضافة الكود التالي اسفل ~~<head>~~

<link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css' rel='stylesheet'/>

ملاحظة

و لتطبيق الوضع الداكن ستجد في اكواد الـ css كود اساسي للتغير على الوان القالب كل ماعليك هو نسخ الكلاس اللذي تريد تطبيق اللون الغامق عليه و لصقه بدلا منه و ثم كرر الكود حسب الاماكن اللذي تريد تظبيق الوضع الليلي عليه

شاهد الفيديو لتعرف الطريقة

تحرير المقال

للبحـث بداخـل المدونــة . . .

تركيب زر الوضع المظلم لقالب بلوجر الشكل السابع