اضافة زر الوضع الليلي لقالب بلوجر بشكلين
فائدة تركيب زر الوضع المظلم لقالب بلوجر
يُعد زر الوضع المظلم (Dark Mode) من الإضافات المهمة التي يمكن تركيبها في قوالب بلوجر الحديثة، لما له من تأثير إيجابي كبير على تجربة المستخدم وتحسين أداء المدونة. يعمل هذا الزر على تبديل واجهة الموقع من الوضع الفاتح إلى الوضع المظلم، مما يوفر مظهرًا مريحًا للعين، خصوصًا أثناء التصفح الليلي أو في الأماكن ذات الإضاءة المنخفضة.
من أهم فوائد زر الوضع المظلم تقليل إجهاد العين، حيث تُثبت الدراسات أن الألوان الداكنة تقلل من الإشعاع الأزرق المنبعث من الشاشات، مما يساهم في تقليل التوتر البصري ويحسن تجربة القراءة. كما أن العديد من المستخدمين يفضلون الوضع المظلم لأسباب جمالية، مما يزيد من احتمالية بقائهم لفترة أطول داخل المدونة.
إضافة إلى ذلك، فإن الوضع المظلم قد يُسهم في تقليل استهلاك الطاقة، خاصة على الأجهزة المزودة بشاشات OLED أو AMOLED، حيث تستهلك الألوان الداكنة طاقة أقل مقارنة بالألوان الفاتحة. وبالتالي، فإن تقديم هذا الخيار للزائرين يعكس اهتمام المدون براحة الجمهور ويوفر لهم تجربة تصفح أكثر مرونة وتخصيصًا.
علاوة على ذلك، فإن وجود زر لتبديل الوضع يضفي لمسة احترافية على القالب، مما يعزز من ثقة الزائرين بمصداقية المدونة. لذلك، فإن تركيب زر الوضع المظلم لا يعد فقط ميزة شكلية، بل هو تحسين فعلي يساهم في رفع جودة الموقع ورضا الزائرين.
هذا الكود اسهل كود يمكن ان تجده في اي مكان لتستخدمه في قالبك
شرح التركيب بالفيديو
الأكواد الخاصة بالاضافة الشكل الأول / الشكل العائم /
بعد الذهاب للمظهر و اختيار تعديل HTML البحث عن </body> و لصق الاكواد التالية اعلاها عن طريق الضغط على Ctrl+f
<script type='text/javascript'>//<![CDATA[const sunIcon = `<svg viewBox="0 0 24 24"><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121z"/></svg>`;const moonIcon = `<svg viewBox="0 0 24 24"><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.977 6.977 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/></svg>`;function toggleDarkMode() {document.body.classList.toggle('dark-mode');const isDark = document.body.classList.contains('dark-mode');localStorage.setItem('darkMode', isDark);const toggleBtn = document.querySelector('.dark-mode-toggle');toggleBtn.innerHTML = isDark ? sunIcon : moonIcon;}document.addEventListener('DOMContentLoaded', function() {const darkMode = localStorage.getItem('darkMode') === 'true';if (darkMode) {document.body.classList.add('dark-mode');}const toggleBtn = document.createElement('div');toggleBtn.className = 'dark-mode-toggle';toggleBtn.innerHTML = darkMode ? sunIcon : moonIcon;toggleBtn.onclick = toggleDarkMode;document.body.appendChild(toggleBtn);window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {if (localStorage.getItem('darkMode') === null) {document.body.classList.toggle('dark-mode', e.matches);const toggleBtn = document.querySelector('.dark-mode-toggle');if (toggleBtn) {toggleBtn.innerHTML = e.matches ? sunIcon : moonIcon;}}});});//]]></script>
ثم نبحث عن </head> و لصق الاكواد التالية اعلاها
<style>/* الوان الوضع الليلي */.dark-mode{--bg-color: #282828;--text-color: #e5e5e5;--text-color-light: #e6e6e6;--header-bg: #1a1a1a;--link-color: #4dabf7;--border-color: #343434;--card-bg: #1e1e1e;--footer-bg: #121212;}/* زر تبديل الوضع */.dark-mode-toggle{position:fixed;bottom:80px;right:30px;z-index:999;background:var(--header-bg);border:1px solid var(--border-color);border-radius:50%;width:46px;height:46px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,0.2);transition:all 0.3s}.dark-mode-toggle svg{width:24px;height:24px;fill:var(--text-color);transition:transform 0.3s}.dark-mode-toggle:hover{transform:scale(1.1)}.dark-mode-toggle:hover svg{transform:rotate(20deg)}/* تطبيق الوضع الليلي على العناصر */.body {background-color: var(--bg-color);color: var(--text-color);}a {color: var(--link-color);}</style>
ملاحظة
ستجد في اكواد الـ css كود اساسي للتغير على الوان القالب كل ماعليك هو نسخ الكلاس اللذي تريد تطبيق اللون الغامق عليه و لصقه بدلا منه و ثم كرر الكود حسب الاماكن اللذي تريد تظبيق الوضع الليلي عليه
شاهد الفيديو لتعرف الطريقة
أما اذا اردت ان يكون الزر بجانب زر البحث بداخل الهيدر مثلا استخم هذا الكود
الشكل الثاني لأضافة زر الوضع المظلم
هذا هو الشكل الثاني الخاص باضفة زر الوضع الليلي لقالب بلوجر الزر هنا لا يظهر بشكل عائم الزر يمكن اضافته بجانب زر البحث مثلا و بداخل الهيدر الخاص بالقالب اما طريقة تطبيق الوضع المظلم هي نفس الطريقة فقظ تعديل مكان الزر
بعد الذهاب للمظهر و اختيار تعديل HTML البحث عن </body> و لصق الاكواد التالية اعلاها عن طريق الضغط على Ctrl+f
<script type='text/javascript'>//<![CDATA[const sunIcon = `<svg viewBox="0 0 24 24"><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121z"/></svg>`;const moonIcon = `<svg viewBox="0 0 24 24"><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.977 6.977 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/></svg>`;function toggleDarkMode() {document.body.classList.toggle('dark-mode');const isDark = document.body.classList.contains('dark-mode');localStorage.setItem('darkMode', isDark);const toggleBtn = document.querySelector('.dark-mode-toggle');toggleBtn.innerHTML = isDark ? sunIcon : moonIcon;}document.addEventListener('DOMContentLoaded', function() {const darkMode = localStorage.getItem('darkMode') === 'true';if (darkMode) {document.body.classList.add('dark-mode');}const toggleBtn = document.createElement('div');toggleBtn.className = 'dark-mode-toggle';toggleBtn.innerHTML = darkMode ? sunIcon : moonIcon;toggleBtn.onclick = toggleDarkMode;document.getElementById('dark-mode-toggle-container').appendChild(toggleBtn);window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {if (localStorage.getItem('darkMode') === null) {document.body.classList.toggle('dark-mode', e.matches);const toggleBtn = document.querySelector('.dark-mode-toggle');if (toggleBtn) {toggleBtn.innerHTML = e.matches ? sunIcon : moonIcon;}}});});//]]></script>
ثم نبحث عن </head> و لصق الاكواد التالية اعلاها
<style>#serbtn{position:absolute;visibility:hidden}.haedbuttons:checked + label i::before,#serbtn:checked + label span::before{content:"\F659"!important;}#serbtn:checked ~ #search-text{width:1012px}#searchform {position: relative;}#search-text{transition: all .3s ease;position: absolute;left: 14px;height: 40px;color: #000;padding: 0;box-sizing: border-box;top: 1px;border: 0;text-align: right;font-family: inherit;float: left;padding-right: 10px;width: 0px; font-weight: bold;font-size: 15px;z-index: 99999;border-bottom: 1px solid #60606026;}#search-text:focus{outline:none}</style><style>/* الوان الوضع الليلي */.dark-mode{--bg-color: #282828;--text-color: #e5e5e5;--text-color-light: #e6e6e6;--header-bg: #1a1a1a;--link-color: #4dabf7;--border-color: #343434;--card-bg: #1e1e1e;--footer-bg: #121212;}/* زر تبديل الوضع */.dark-mode-toggle{bottom:80px;right:30px;z-index:999;background:var(--header-bg);border:1px solid var(--border-color);border-radius:50%;width:46px;height:46px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,0.2);transition:all 0.3s}.dark-mode-toggle svg{width:24px;height:24px;fill:var(--text-color);transition:transform 0.3s}.dark-mode-toggle:hover{transform:scale(1.1)}.dark-mode-toggle:hover svg{transform:rotate(20deg)}/* تطبيق الوضع الليلي على العناصر */.body {background-color: var(--bg-color);color: var(--text-color);}a {color: var(--link-color);}</style>
الزر الخاص بالاضافة ضعه بداخل الهيدر مثلا بجانب زر البحث
<div id="dark-mode-toggle-container"></div>