إضافة الوضع الليلي فى بلوجر dark mode

يساعد الوضع الليلي فى بلوجر dark mode في قراءة المحتوى بسهولة خلال الإضاءة المنخفضة. تعرف على كيفية البدء في إضافة الوضع الليلي في بلوجر مع هذه الخدعة البسيطة. 

هي خطة ضوء لوني في الظلام . 
تخيل خلفية رقمية مع خلفية بيضاء مع خلفية بيضاء ونص مظلم. في الوضع dark mode الداكن بلوجر، 
فإن نفس الوثيقة هي خلفية مظلمة مع لون النص الأبيض اليوم، 
معظم التطبيقات والهواتف سهلة الاستخدام مع وظيفة الوضع المظلم. ولماذا لا تفعل ذلك؟

يوفر الوضع الليلي dark mode الداكن تأثيرين على وضع الإضاءة القياسي:  

  1) يقطع هذا الوضع كمية الضوء الذي تدخله في العينين، ويقلل من ضغط العين يمكن أن يساعدك في تغيير أفضل. 

 2) يستخدم أيضا ضوء أقل، مما يستهلك طاقة أقل. يزداد اتجاه الحالة المظلمة حاليا على تصاميم الإنترنت إلى حد كبير.

 هذا يجعل الموقع أسهل وأسهل خلال إضافة الوضع الليلي الإضاءة المنخفضة. من لا يريد أن يستريح في عينيك عند القراءة؟  تخيل،

 قرأت عنصر على جهاز في الساعة 12 مع الحالة الطبيعية، والضوء الذي يقضيه وكل هذه. وبعد وبعد - انه كاب عيني كما اعتقدت.

 أنا أكره الوضع المعتاد بنفس الطريقة مثل مصاصي الدماء يكرهون ضوء الشمس. 

 الوضع الليلي هو عنصر أساسي في هذا بلوجر وفي هذه المقالة،

 سأقدم لك بعض الخطوات السهلة مثل إضافة الوضع الليلي أو الوضع الداكن في المدونات. 

 يمكنك التحقق من اللوحة المباشرة لكيفية عمل الوضع المظلم في موقعنا (الموجود في شريط القائمة).

لا تنس أن تصنع نسخة احتياطية من مدونتك تماما قبل المتابعة الخطوة الأولى في إنشاء وضع الظلام 

كيفية اضافة زر الوضع المظلم  فى بلوجر dark mode 

هي إضافة في HTML إلى 

مدونتك بلوجر. وابحث عن أو ]]></b:skin> الصق الكود التالي فوقه

هنا الكود

.nightly{color:#999;font-size:13px}
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
.togglenight{display:none;}
.togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:10px;position:relative;cursor:pointer;margin-left:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.togglenight + .togglenight-btn:after,.togglenight + .togglenight-btn:before{position:relative;display:block;content:"";width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:'';border-radius:100px;background:#887fff;transition:left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;width:20px;height:20px;top:-5px;left:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
.togglenight-switch:checked + .togglenight-btn{background:rgba(255,255,255,.15)}
.togglenight:checked + .togglenight-btn:after{content:'';left:55%;background:#ff9f43}
.nightmode{background:#043D5D;color:rgba(255,255,255,.7)}

 

وابحث عن /bodyالصق الكود التالي فوقه

هنا الكود

<script type="text/javascript">
//<![CDATA[
// Night Mode
$("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")});
//]]>
</script> 
 

 ملاحظة:
إذا لم تكن قد قمت بتثبيت كود jQuery على مدونتك بلوجر، فقم بنسخ الكود أدناه ثم لصقه فوق كود </ head >.
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
 ثم تقوم بحفظ