مع تطور القوالب اصبحنا نرى مختلف الملحقات والإضافات الرائعة، تعطيك اختيارات اكثر لذا اضافتنا في هذا اليوم السعيد هي الوضع الليل إذ سألتني هل نحتاج حقا هذه الإضافة؟ سأرد بنعم كزائرين للمواقع نعتقد أننا بحاجة إلى المزيد من الخيارات. كالتحول للوضع الليلي الذي يتيح تجربة مريحة في التصفح وخصوصا إن كانت المدونة تناقش اخبار او شيء يطيل في تركيز الزائر فإن كان القالب له لون ابيض ساطع فحقا ستتعب من القراءة حتى مع توفر اختيار التقليل من السطوع في الحواسيب.
المهم لنتكلم عن اضافتنا والتي هي من افضل الإضافات الليلية لحد الآن مشابهة للوضع الليلي باليوتوب حيث لن تلاحظ اي توهج ابيض عند تحميل الموقع او الدخول للمواضيع.
يمكنك تجربة الإضافة على مدونتنا مباشرة... تعمل على اي قالب بدون مشاكل
1. سجل الدخول إلى مدونتك
2. المظهر >> تعديل HTML
3. ابحث عن <body> ثم ضع الكود التالي اسفله
<script>
//<![CDATA[
function auto(){document.body.classList.add('auto');if(new Date().getHours()>19||new Date().getHours()<6){document.body.classList.add('dark');localStorage.setItem('641234dark','true')}else{document.body.classList.remove('dark');localStorage.setItem('641234dark','false')}}function dark(){localStorage.getItem('641234dark')=='true'?document.body.classList.add('dark'):document.body.classList.remove('dark')}if(localStorage.getItem('641234auto')=='true'){auto()}else{localStorage.getItem('641234dark')==null?auto():dark()}function toggle(){localStorage.setItem('641234auto',localStorage.getItem('641234auto')=='true'?'false':'true');localStorage.getItem('641234auto')=='true'?auto():document.body.classList.remove('auto')}function mode(){document.body.classList.remove('auto');localStorage.removeItem('641234auto');localStorage.setItem('641234dark',localStorage.getItem('641234dark')=='true'?'false':'true');dark()}
//]]>
</script>
<div class='dark-mode'><button class='toggle' onclick='toggle()' style='display:none' type='button'/><button class='mode' onclick='mode()' type='button'/></div>
/* Button Mode */
.dark-mode{float: left; position: absolute; left: 90px; top: 25px; z-index: 98;}
.toggle,.mode{position:relative;float:right;outline:0;border:0;padding:0;overflow:hidden;cursor:pointer}
.toggle{margin-left:10px;border-radius:10px;width:33px;height:20px}
.toggle,.mode::before,.dark .mode::after{background:#ccc}
.dark .toggle{background:#444}
.auto .toggle{background:#6d6!important}
.toggle::before,.mode::before,.mode::after{position:absolute;content:''}
.toggle::before{top:1px;left:1px;transition:.4s;background:#fff;width:18px;height:18px}
.auto .toggle::before{left:14px}
.toggle::before,.mode,.mode::before,.mode::after{border-radius:50%}
.dark .mode{top:2px;left:-2px;overflow:visible}
.dark .mode,.dark .mode::before{border-radius:0}
.mode,.dark .mode::before,.mode::after{background:#999}
.mode{width:20px;height:20px}
.dark .mode,.mode::before,.mode::after{width:16px;height:16px}
.mode::before{top:2px;left:2px}
.dark .mode::before{top:0;left:0;transform:rotate(45deg)}
.mode::after{top:-3px;left:7px}
.dark .mode::after{top:1px;left:1px;width:14px;height:14px}
.u-p-medium h3:after { content: ""; position: absolute; width: 60px; height: 2px; background: #607D8B; display: block; top: 50%; margin-top: -1px; left: 100%; } .u-p-medium h3:before { content: ""; position: absolute; width: 60px; height: 2px; background: #607D8B; display: block; top: 50%; margin-top: -1px; left: auto; right: 100%; } .u-p-medium h3 { font-size: 20px; margin: 0 auto; text-align: center; display: table; position: relative; padding: 0 10px; }
/* Body Edit */
body.dark{background: #1c1c1c ;color:#ccc;}
* إن لاحظت فالوضع الليلي اشتغل على الخلفية هنا علينا تطبيق .dark على كل وسم مثلا الشريط الجانبي #sidebar ليصبح هكذا .dark #sidebar {هنا Css} وكل قالب يختلف عن آخر وسيتطلب بعض الوقت للتطبيق على كل وسم
كيفية معرفة الوسوم بالمدونة؟
هناك طريقة سهلة لمعرفة سمات عنصر المدونة، استخدم ميزة فحص العنصر (Inspect Element) الموجودة في متصفحك. افتح موقع الويب الخاص بك ، وانقر بزر الماوس الأيمن في المساحة المراد التطبيق عليها وحدد خيار فحص العنصر
لذا كالعادة اوجه كلامي للمبتدئين التعليقات مرحب بها للمساعدة.