اقدم لكم شرح لطريقة تركيب الوضع المظلم 

هذه الاضافة يمكن تثبيتها في المكان اللذي تراه مناسب 

تبقى بشكل ثابت بالمكان اللذي وضعته به

تركيب لا تنزل و تصعد بنزول الصفحة و صعودها

تركيب الاضافة

نذهب الى المظهر و نضغط على Ctrl + F و نضع في مستطيل البحث /head و نضغط على Enter
نضع الكود التالي فوقه

<style type='text/css'>
/*<![CDATA[*/
/*=====================================
=  button Dark Mode
=====================================*/
.switch-mode{display:inline-block;margin:0 0 0 10px;background:transparent;min-width:180px;height:40px;line-height:40px;padding:0 15px;z-index: 999999;top: -24px;left: 205px;float: left;position:relative}
.switch-mode #switch-mode{display:inline-block;width:40px;height:6px;background:#1a1c25;border-radius:3px;position:relative;top:1.5px; float: left;cursor:pointer}
.switch-mode #switch-mode .switch-button{width:14px;height:14px;display:block;background:#eb1111;position:absolute;top:-5px;left:0;border-radius:100%}
.switch-mode #switch-mode.active .switch-button{background:#0ca71b;left:auto;right:0}
/*=====================================
=  body Dark Mode == ضع اكواد التنسيق اسفل التعليق هذا
=====================================*/
/* هذه في الوضع اليلي*/
.dark-mode #outer-wrapper{color: silver;background-color: #222425;}
.dark-mode #footer-wrapper{color: silver;background-color: #222425;}
.dark-mode #header-wrapper{color: silver;background-color: #222425;}
.dark-mode #label_with_thumbs, .index .post, .item .post, .home-ad{background-color: #222425;}




/*]]>*/
</style>

طريقة التطبيق على اي قسم تختاره

تقوم بنسخ هذا الكود و تلصقه اسفل /* هذه في الوضع اليلي*/

.dark-mode #outer-wrapper{color: silver;background-color: #222425;}

و تقوم بالتعديل على ال ايدي الخاص بالقسم اللذي تريد التطبيق عليه

نضع في مستطيل البحث  </body>  و نضغط على Enter
نضع الكود التالي فوقه

<script type='text/javascript'>//<![CDATA[!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a("object"==typeof exports?require("jquery"):jQuery)}(function(a){function b(a){return h.raw?a:encodeURIComponent(a)}function c(a){return h.raw?a:decodeURIComponent(a)}function d(a){return b(h.json?JSON.stringify(a):String(a))}function e(a){0===a.indexOf('"')&&(a=a.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\"));try{return a=decodeURIComponent(a.replace(g," ")),h.json?JSON.parse(a):a}catch(b){}}function f(b,c){var d=h.raw?b:e(b);return a.isFunction(c)?c(d):d}var g=/\+/g,h=a.cookie=function(e,g,i){if(void 0!==g&&!a.isFunction(g)){if(i=a.extend({},h.defaults,i),"number"==typeof i.expires){var j=i.expires,k=i.expires=new Date;k.setTime(+k+864e5*j)}return document.cookie=[b(e),"=",d(g),i.expires?"; expires="+i.expires.toUTCString():"",i.path?"; path="+i.path:"",i.domain?"; domain="+i.domain:"",i.secure?"; secure":""].join("")}for(var l=e?void 0:{},m=document.cookie?document.cookie.split("; "):[],n=0,o=m.length;o>n;n++){var p=m[n].split("="),q=c(p.shift()),r=p.join("=");if(e&&e===q){l=f(r,g);break}e||void 0===(r=f(r))||(l[q]=r)}return l};h.defaults={},a.removeCookie=function(b,c){return void 0===a.cookie(b)?!1:(a.cookie(b,"",a.extend({},c,{expires:-1})),!a.cookie(b))}});$(document).ready(function(){$.cookie("dark-mode")?($("#switch-mode").addClass("active"),$("body").addClass("dark-mode")):($("body").removeClass("dark-mode"),$("#switch-mode").removeClass("active")),$("#switch-mode").on("click",function(){$.cookie("dark-mode")?$.removeCookie("dark-mode",{path:"/"}):$.cookie("dark-mode","yes",{expires:360,path:"/"}),location.reload()})});//]]></script>

نضع الزر في المكان المناسب مثلا فوق رسائل المدونة الالكترونية

<div class="switch-mode">
<div id="switch-mode">
<div class="switch-button">
<span></span></div>
</div>
</div>

و قم بالحفظ و مبروك عليك الأضافة

عبدو تكنولوجي

وفي الختام !

شكرًا لوقتكم واهتمامكم بقراءة موضوع تركيب الوضع الليلي لقوالب البلوجر الشكل الثالث . إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل ما هو جديد.