Web Sitesine Gece Modu (Dark Mode) Ekleme – Karanlık Mod Yapımı

Son güncelleme:
Web Sitesine Gece Modu (Dark Mode) Ekleme – Karanlık Mod Yapımı

Gece modu ekleme yazım ile sitenize gece modu veya karanlık mod ekleyebilir ve sitenizi kullanıcılar için daha kullanışlı hale getirebilirsiniz. Bu işlemler sadece WordPress sitelerde geçerli değildir. Ana kodlarımız jQuery ile yazıldığı için bütün altyapılarda kullanılabilir.

Sadece geçiş butonu ve kontrol sisteminde farklılıklar olabilecektir. Ben PHP ile nasıl yapıldığını göstereceğim. Siz hangi dili kullanıyorsanız mantığına göre bir araştırma yaparak aynısını sitenize uygulayabilirsiniz.

logo

Uygun fiyatlı ve kaliteli hosting satın al.

Web Sitesine Gece Modu Ekleme

Eğer başka bir dil ile sitenizi yazıyorsanız, rahat bir şekilde yapın diye sistemin işleyişini kısaca anlatmak istiyorum.

Öncelikle bir butonumuz olacak. Bu butona tıklayınca bir cookie oluşturacak ve body’e bir class ekleyecek. Biz de bu class’a göre yeni CSS kodlarımızı yazacağız ve sitemize gece modu ekleme işlemini bitirmiş olacağız. Şimdi hiç vakit kaybetmeden kodlarımızı paylaşalım.

Öncelikle buradan jQuery Cookie kütüphanesini yazılımımıza entegre etmeliyiz. Bu entegrasyonu yapmazsak her gece moduna geçişte Chrome Geliştirici Konsolu’nda veya herhangi bir tarayıcı konsolunda hata görünecektir.

Not: jQuery Cookie kütüphanesini jQuery kütüphanesinin hemen altında olması lazımdır.

Daha sonra aşağıdaki kodu javascript dosyasına yapıştırıyoruz.

jQuery('body').on('click', '#gece-modu', function (event) {
	var main = $(this);
	if ($("#gece-modu a i").hasClass("fa-moon")) {
		$("#gece-modu a i").removeClass("fa-moon").addClass("fa-sun");
		$("body").addClass("dark-mode");
		$.cookie("mod", "gece", {
			path: '/'
		});
	} else {
		$("#gece-modu a i").removeClass("fa-sun").addClass("fa-moon");
		$("body").removeClass("dark-mode");
		$.cookie("mod", "gunduz", {
			path: '/'
		});
	}
});

var mod = $.cookie("mod");
if (mod == "gece") {
	$("body").addClass("dark-mode");
	$("#gece-modu a i").removeClass("fa-moon").addClass("fa-sun");
} else if (mod == "gunduz") {
	$("body").removeClass("dark-mode");
	$("#gece-modu a i").removeClass("fa-sun").addClass("fa-moon");
}

Bu kodu kısaca şöyle açıklayabilirim.

#gece-modu ID’li elemana tıklayınca #gece-modu ID’li elemanın içeriğindeki i elemanında fa-moon class’ı var ise fa-moon’u kaldır ve fa-sun’ı ekle. Ve body’e “dark-mode” class’ını ekle. Daha sona mod olarak bir cookie oluştur, içeriğine de gece ekle.

else kısmında ise bunun tam tersini yap diyebiliriz.

Alt kısımda ise sayfa geçişlerinde cookie kontrolü ile body’e class eklenmesi ve gece modu butonunda değişim yapılması sağlanmıştır.

Şimdi gece modu butonunu ekleyelim.

<li class="dark-mode-button" id="gece-modu"><a href="javascript:void(0);"><i class="fa fa-moon"></i></a></li>

Ben li etiketi ile ekleme yaptım. Siz istediğiniz gibi bir eleman kullanabilirsiniz.

Bu işlemi yaptık sonra bir tane daha kod yazmamız lazım. O da body’e cookie’ye göre class yazdırmak olacak. Bu işlemi yapmazsak sayfa yüklendiğinde önce normal yüklenir hemen ardından body’e class ekler. Diyelim gece moduna geçtiniz. Başka sayfaya geçtiğiniz zaman önce gündüz modunda olacak, sonra gece moduna geçecektir. Bu kullanıcıyı rahatsız eder.

Aşağıdaki kodu body’e eklerseniz sorun çözülecektir.

<?php if($_COOKIE['mod']=="gece"){echo "dark-mode";}else{ echo "day-mode"; }?>

Eklendikten sonra görünüm şu şekilde olmalıdır.

<body class="<?php if($_COOKIE['mod']=="gece"){echo "dark-mode";}else{ echo "day-mode"; }?>">

Şimdi geriye tek bir şey kaldı. Özel CSS kodlarını eklemek.

Bu kodu CSS dosyasına ekleyin ve kaydedin.

.dark-mode{
	background: #19191A;
	color: #D5DEEC;
	transition: .2s !important;
}

Daha sonra gece modunu test edebilirsiniz. Eğer sağlık bir şekilde çalışıyorsa önüne .dark-mode class’ını ekleyerek yeni CSS kodlarını ekleyebilirsiniz.

Bültene Abone Ol

Gelen kutunuza teslim edilen en son haberlerimizi, öğreticilerimizi, kılavuzlarımızı, ipuçlarımızı ve fırsatlarımızı alın.

Yorum Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

3 Yorum

  • Avatar of Eda Eda

    Gece moduna özel logo değiştirme yapımı hakkındaki araştırmalarınızı da okumak isterim.

  • Avatar of Eda Eda

    Merhaba, Gece moduna özel tema değiştirme yapımı hakkındaki araştırmalarınızı okumak isterim.

    • Avatar of Enes Cantürk Enes Cantürk

      WordPress çoklu tema desteklemiyor. Yazıda da bahsettiğim gibi .dark-mode class'ını kullanarak özelleştirme, gizleme veya yeniden CSS kodları ile baştan sonra düzenleme yapabilirsiniz.

    Yorum yaparken yazım kurallarına ve genel ahlak kurallarına dikkat edelim.