- الكود التالي خاص ب الزر الذي يضغط عليه ويمكنك وضعه في اي مكان تريد ضهوره
<div class=”switch-mode”><div id=”switch-mode”><div class=”switch-button”><span></span></div></div></div>
- و الكود التالي هوا كود الجافا سكريبت
- تضع الكود فوق ال </body>
<!-- Start HTML -->
<pre title='HTML' data-codetype ='HTMLku'><code class='language-markup'>
<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>
</code></pre>
<!-- End HTML -->
- ضع هذه الاكواد فوق ال </head>
<style type=”text/css”>/*<![CDATA[*//*====================================== button Dark Mode=====================================*/.switch-mode{display:inline-block;margin:0 0 0 10px;background:transparent;min-width:180px;height:64px;line-height:64px;padding:0 15px;position:relative}.switch-mode #switch-mode{display:inline-block;width:40px;height:6px;background:#1a1c25;border-radius:3px;position:relative;top:1.5px;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 == ضع اكواد التنسيق اسفل التعليق هذا=====================================*/
/*]]>*/</style>
- الجزء الاول من الكود الذي تعليقه button Dark Mode ذالك شكل الزر الذي وضعت اكواده في اول الشرح يعني يمكنك تغيير شكل حتى يتناسب مع شكل مدونتك
- و خصصت جزى في الكود اسم تعليقه body Dark Mode ذالك تضع عليه اكواد ال css الجديدة التي تحتوي على الوان ال Dark Mode سوف اعطيك مثال على كيفية اضافة ستايل خاص للوضع اليلي
- لدينا عنوان مقال class او id الخاص به title-post ويكون في اكواد css الخاصة به في الوضع العادي لون الخط اسود او اي لون اخر وانتا تريد تغيير لونه عندا الوضع اليلي فعليك سوف عمل هكذا
/* هذه في الوضع العادي*/.title-post{ color: #000;}
/* هذه في الوضع اليلي*/.body.dark-mode .title-post{ color: silver;}




