Blogger’da Karanlık Gece Modu Nasıl Yapılır

Anasayfa › Blogger'da Karanlık Gece Modu Nasıl Yapılır

Blogger'da Karanlık Gece Modu Nasıl Yapılır

Sitelerde, bloglarda ve mobil uygulamarda başlayan gece - karanlık modu furyasını ben de kendi bloğuma uygulayarak blogger üzerinde test olmuştum. Farklı kaynaklarda blogger için karanlık - gece modu için bir çok örnek bulunuyor. Fakat birçoğu tam anlamıyla çalışmıyor. Özellikle benim için en önemli şey sayfa yenilendiğinde veya farklı sayfalara geçiş yapıldığında seçimin(karanlık mod veya gece modu) kalmasıydı. Bunu da bulduğum örneklerden birini blogger'a uyarlayarak görmüş oldum. /body> etiketinden önce eklenmesi gereken javascript kodu : Bu kod ile genel gövde etiketi olan <body> etiketine dark isimli bir class ekleniyor ve bu class sayesinde temaya özelleştirme yapılıyor.

Javascript Kodları

<script>
 $(document).ready(function($) {  
	var mode = localStorage.getItem('mode');
  if (mode) 
  	$('body').addClass(mode);
  $(".darkmode").click(function() {
    $("body").addClass("dark");
    localStorage.setItem('mode', 'dark');
  });
  $(".normalmode").click(function() {
    $("body").removeClass("dark");
 $("body").addClass("normal");
    localStorage.setItem('mode', null);
  });
});
 </script>

CSS Kodları : Bu kodlar örnek olarak verilmiştir kodlardaki etiketler her şablon/temada aynı olmayabilir(örneğin .post class'ı yerine temada .yazi veya .content class'ları olabilir). Buradaki önemli nokta css düzenlemesi yapılırken body.dark .post{} veya body.dark .sidebar{} şeklinde bir css düzenlemesi yapılacağıdır.

CSS kodları

<style>
body.dark {background:#212121 !important; color: #f9f9f9;}
body.dark .header{background:#424242}
body.dark a, body.dark h1, body.dark h2, body.dark h3{color: #f9f9f9;}
body.dark .blog {background:#212121 !important; color: #f9f9f9;}
body.dark .blog-post__content{background:#424242}
body.dark .footer{background:#424242}
body.dark .footer__credit{background:#616161}
body.dark .footer__text{color:#f9f9f9}
body.dark #comments{background:#424242}
body.dark #comments a.comment-reply{background:#616161; color: #f9f9f9;}
body.dark ul.trail-items a{color:#f9f9f9}
body.dark .blog-post__content pre{background:#212121; margin-top:15px; margin-bottom:15px; color:#f9f9f9;}
body.dark #xsidebar .widget {margin-bottom: 20px; background:#424242; padding: 20px; box-shadow: 0 10px 30px gba(0,0,0,.05);
}
body.dark .light, body:not(.dark) .dark {display: none;}
</style>

Son kodumuz ise normal mod / gece modu değişikliği için kullanılacak kod parçası, bu ikon veya yazı olabilir. Bloğumda sağ üste görüleceği gibi ben ikon kullandım. İkonlar için fontawesome kullanıyorum. Eğer bu kütüphane bloğunuza ekliyse aşağıdaki kodları eklediğiniz takdirde ikonları görebilirsiniz. Aksi durumda ikonlar görünmeyecektir.

HTML kodları

<a class="normalmode"><i class="dark fal fa-sun"></i>Normal Mod</a>
<a class="darkmode"><i class="light fal fa-moon"></i>Gece Modu</a>

UYARI : Bu kodlar %100 çalışır durumdadır. Kendi şablon veya temanıza uygun şekilde düzenlenmesi gerekmektedir.

Web Günlüğü