Farklı css seçmek?

Sen gece CSS dosyani oluştur gerisi birkaç JavaScript koduna kalir. CSS dosyani oluştur bana yaz yardımcı olurum

Hocam öncelikle gece veya gündüz css kodlarının olduğu css dosyasını sayfanıza dahil eden kodu silin.
Daha sonra head kısmında şunun gibi bir kod oluşturun ;

href değeri boş olsun ve id değerine mod ekleyin ki erişmemiz daha kolay olsun.
Daha sonra (tercihen tagından hemen önce) sayfanıza şu kodları dahil edin;
<script>
if(!localStorage.mod) {
localStorage.setItem("mod", "gunduz");
}
var mod = window.localStorage.mod;
if(mod=="gunduz") {
$("#mod").prop('href','gunduz.css');
} else if(mod=="gece") {
$("#mod").prop('href','gece.css');
$("#buton").html("Gündüz Modunu Aç");
}
$(document).ready(function(){
$("#buton").on("click",function(){
var a = $("head").find("#mod").attr("href");
if(a=="gece.css"){
$("#mod").prop('href','gunduz.css');
localStorage.removeItem('mod');
localStorage.mod = "gunduz";
$(this).html("Gece Modunu Aç");
} else if(a=="gunduz.css") {
$("#mod").prop('href','gece.css');
localStorage.removeItem('mod');
localStorage.mod = "gece";
$(this).html("Gündüz Modunu Aç");
} else {
$("#mod").prop("href",'gece.css');
localStorage.setItem("mod", "gece");
$(this).html("Gündüz Modunu Aç");
}
});
});
</script>
Burada sıra ile yapılan işlemleri anlatayım;
Öncelikle kullanıcının tarayıcısının yerel depolamasında 'mod' adlı bir anahtar yoksa 'gunduz' değeriyle oluşturulması sağlanıyor.
daha sonra yerel depolamadaki mod değeri mod adlı değişkene atanıyor. Ve eğer değeri 'gunduz' ise bizim üstte href değerini boş bıraktığımız yere gunduz.css dosyasını atıyor ve sayfayı o şekilde yüklüyor. Ama yok değer 'gece' ise de bu sefer gece.css dosyasını atayarak yüklüyor. Sayfayı ilk kez ziyaret eden veya yerel depolama alanını sıfırlayan birisi de sayfayı ilk açtığında gunduz.css dosyasıyla açıyor.
Daha sonra toggle yani hem açıp hem kapatan işlemi görecek butona tıklandığı zaman tagı içerisinde id değeri mod olan kod parçasının href değerini alıp a değişkenine atıyoruz.
Bu a değişkeni eğer gece.css yazısını içeriyorsa bunu değiştirip gunduz.css yapıyoruz ve yerel depolamadaki mod anahtarının değerini de gunduz olarak değiştiriyoruz, eğer gunduz.css ise de tam tersini yapıyoruz. Eğer ikisi de değilse (yani boşsa veya ufak bir ihtimal yanlış bir yazıysa) kullanıcı ilk tıklamada gece modunu görsün diye yerel depolamadaki veriyi ve css dosyasını gece olacak şekilde ayarlıyoruz.

Ben değiştirirken id değeri buton olan bir buton kullandım, siz css dosya isimlerini ve buton id sini ve keza diğer görsel işlemleri kendinize göre ayarlarsınız :)

Abdullahx hocam anlatım için çok teşekkürler, css işini bitirir bitirmez işe koyulacağım.

Hocam denedim fakat



kodunu ekleyince site stil dosyasını çekemiyor?

Hocam ben boş bir sayfada denediğimde sorunsuz çalıştı valla, engelleyen veya çakışan başka kodlar mı var acaba