JQUERY GECE MODU UYGULAMASI

     Web sayfalarındaki gece modu uygulaması mantığını anlamak  için basit bir arayüz yapalım. Bunun için jquery yada javascript ile, sayfa içindeki elamanlara class ekleme , çıkarma özelliklerinden yararlanabiliriz. Mevcut durumda sayfa arka planı beyaz iken yazıların koyu olduğu sayfa düzenini, body etiketine "gece " class'ı ekleyerek tersine çevireceğiz.

1. HTML YAPI

Öncelikle Bootstrap 5 yapısında basit bir HTML sayfa hazırlayalım. 

<div class="container mt-5 border p-5">
		<h1> GECE/GÜNDÜZ MODU ÇALIŞMASI</h1>
		<p> Jquery ile gece gündüz modu uygulaması </p>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p>
		<button class="geceBtn btn btn-dark"> GECE MODU AÇ</button>
		<button class="gunduzBtn btn btn-light d-none"> GÜNDÜZ MODU AÇ</button>
	</div>

Yukarıdaki paragraf / başlık yapısının sonuna gece modu ve gündüz modu için 2 buton ekledik ve kendilerine özgü geceBtn ile gunduzBtn class'larını ekledik. Bu classları jquery ile tıklama olayını kontrol ederken kullanacağız.

2. CLASS DEĞİŞİMİ İÇİN CSS

Bu örnek çalışma için body etiketine ekleyeceğimiz .gece classı için 2 özellik eklememiz yeterli. Daha büyük ve kapsamlı sayfalarda farklı css özellikleride eklenmesi gerekebilir. Bİz gece modunda sayfa arka planını siyah yada koyu gri , sayfa yazı rengini ise beyaz yapacağımız için aşağıdaki özellikleri vermemiz yeterli.

.gece {background:#000; color:#fff; }

3. JQUERY İLE CLASS DEĞİŞİMİ

Burada önce jquery bağlantısını yaptıktan sonra, her iki buton için tıklama olaylarında yapılacakları yazmalıyız. geceBtn tıklandığında, body etiketine "gece" class'ını ekleyip, butonların class durumunu ise gece modunda gündüz butonu görünecek şekilde ve  gündüz modunda ise gece butonu görünecek şekilde ayarlayacağız.

Jquery ile:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 

	<script>	
		//jquery ile
		$(".geceBtn").click(function(){
			$("body").addClass("gece");
			$(".gunduzBtn").removeClass("d-none");  // show goster
			$(".geceBtn").addClass("d-none");  // hide gizle
		})
		$(".gunduzBtn").click(function(){
			$("body").removeClass("gece");
			$(".gunduzBtn").addClass("d-none");  // show goster
			$(".geceBtn").removeClass("d-none");  // hide gizle
		})
	</script>

Javascript ile:

	<script>	
		document.querySelector(".geceBtn").addEventListener("click",function(){
			document.querySelector("body").classList.add("gece");
			document.querySelector(".gunduzBtn").classList.remove("d-none");
			document.querySelector(".geceBtn").classList.add("d-none");
		})
		document.querySelector(".gunduzBtn").addEventListener("click",function(){
			document.querySelector("body").classList.remove("gece");
			document.querySelector(".gunduzBtn").classList.add("d-none");
			document.querySelector(".geceBtn").classList.remove("d-none");
		})
	</script>

Gece modu butonu tıklandığında sayfa kararıp yazılar açık hale dönüşürken, gündüz butonuna tıkalndığında ise sayfa ilk haline geri dönecektir..

Yararlı olması dileğiyle..