Bloğunuza giriş yaptıktan sonra sırası ile Tema - Temayı düzenle sekmelerinden sonra, temada CTRL - F yardımı ile </body> öğesini aratarak, alt kısımdaki kodları öncesine ekleyin.

<style>
.dark-mode{width:66px}
.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}
</style>
<script>
//<![CDATA[
function auto(){document.body.classList.add('auto');if(new Date().getHours()>21||new Date().getHours()<7){document.body.classList.add('dark');localStorage.setItem('43085dark','true')}else{document.body.classList.remove('dark');localStorage.setItem('43085dark','false')}}function dark(){localStorage.getItem('43085dark')=='true'?document.body.classList.add('dark'):document.body.classList.remove('dark')}if(localStorage.getItem('43085auto')=='true'){auto()}else{localStorage.getItem('43085dark')==null?auto():dark()}function toggle(){localStorage.setItem('43085auto',localStorage.getItem('43085auto')=='true'?'false':'true');localStorage.getItem('43085auto')=='true'?auto():document.body.classList.remove('auto')}function mode(){document.body.classList.remove('auto');localStorage.removeItem('43085auto');localStorage.setItem('43085dark',localStorage.getItem('43085dark')=='true'?'false':'true');dark()}
//]]>
</script>

Bu işlemden sonra gece modu düğmesini, temanızda görünmesini istediğiniz yere yerleştirin. Düğmenin daha çok kenar çubuğu veya menüden sonra görünmesi daha iyi olacaktır. Alt kısımdaki kodları yerleştirdiğiniz yerde gece modu düğmesi görünecektir.

<div class='dark-mode'>
<button class='toggle' onclick='toggle()' type='button'/>
<button class='mode' onclick='mode()' type='button'/>
</div>

Geldik sizi en çok uğraştıracak kısma. Gece modunun blogunuzda hangi kısımlarında çalışması gerektiğini tek tek siz belirleyerek kodları <style> öğesinden sonrasına siz ekleyeceksiniz. Bunlar body, footer, header vb. blogunuzda bulunan alanlar. Örnek bir kod gösterecek olusak;

 .dark .header{background-color:#444;/color:#eee;}

Css farklı kısım öğeleri için kodlar farklı gösterilir, başka bir örnek ise;

#body.dark {
    background-color: #444;
    color: #eee;
}

Test edilmiştir, temanıza uyguladığınız takdirde kusursuz olarak çalışmaktadır.