Blogger'da Karanlık - Koyu Mod Nasıl Yapılır?

Sosyal medya uygulamalarının karanlık moda geçmesiyle bir çok web siteside kullandıkları temalara koyu modu eklediler. Aslında koyu modun amacı tamamiyle mobil uygulamaların telefonun şarjını fazla yememesi ve gündüz modunun kimilerinin gözünü yormasıyla geliştirildi.

Örneğin benim ile gündüz modunda gözlerim epey ağrıyor haliyle gözlerim sık sık kırpmaya başlıyorum bunuda yapmak inanın hiç hoşuma gitmiyor.

Koyu modu zaten sosyal medya uygulamalarının çoğu kullanıyor bunlara örnek verecek olursak eğer; WhatsApp, Instagram vb diğer sosyal medya uygulamaları diyebiliriz.

Bende blogumda aktif olarak koyu modu kullanıyorum bunu gören takipçilerim Blogger'da bunu nasıl kullanabileceğini veya kullandıkları temaya nasıl ekleyebileceklerini öğrenmek istediği mailler almaya başlamıştım. Bu yazımda Blogger'da karanlık - koyu modun nasıl yapılacağı hakkında bilgiler vereceğim.

Blogger'da Karanlık - Koyu Mod Nasıl Yapılır?

</body> kodundan önce aşağıdaki JS kodlarını ekleyelim, eklediğimiz kod sayesinde blogumuzun </body> etiketine dark isimli bir class ekleyiyoruz ve bu sayede kullandığımız temanın görünümünü bozmadan istediğimiz yerlerini koyu bir görünüme kavuşturacağız.

<div class='Switchbtn'>
<span class='nightly'>Koyu Mod</span> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/>
<label class='togglenight-btn' for='nightmode'/></div>
<script type='text/javascript'>
//<![CDATA[
// Night Mode www.ilkaygurler.com
$("#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>

Eklediğimiz kodlar ile aynı zamanda temamızı koyu moda geçirebileceğimiz bir butonda ekledik, şimdi aşağıdaki CSS kodlarını temamızda bulunan </head> etiketinden önce ekleyelim.

<style type='text/css'>
/* Night Mode */
.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:&quot;&quot;;width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:&#39;&#39;;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:&#39;&#39;;left:55%;background:#ff9f43}
.nightmode{background:#202124;color:rgba(255,255,255,.7)}
.nightmode a{color:rgba(255,255,255,.7)!important}
.nightmode a:hover{color:rgba(255,255,255,.4)!important}
.nightmode .class-body{}
.nightmode .class-post-title{}
.nightmode .header{}
.nightmode .post-outer{}
.nightmode .footer{}
.nightmode .sidebar{}
</style>

Yukarıda CSS kodlarının son kısmında işaretlediğim kodları temanıza göre düzenlemeniz gerekiyor. Bunlar sadece örnek olması amacıyla benim eklediğim kodlardır. Temanızın şablonunda hangi kısmı koyu yapmak istiyorsanız aşağıdaki gibi kendiniz düzenlemeniz gerekmektedir.

.nightmode .header{background:#222}
.nightmode .post-outer{color:#fff}
...

Yukarıda gece modu için bir butonda eklediğimizi söylemiştim. Bu buton temamızın hemen sağ üst köşesinde beliyor ben öyle ayarladım. Butonu istediğiniz yerde gösterebilirsiniz bu size kalmış. Gece modu butonunu düzenlemek içinde aşağıdaki CSS kodunu düzenleyebilirsiniz.

.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}

Hepsi bu kadar kodlar çalışır durumdadır ve kendinize özel olarak düzenlemeniz gerekmektedir. İlgili düzenlemeyi yapmadığınız taktirde koyu mod istediğiniz gibi çalışmayacaktır. İyi bloglamalar.