Toggle Night Mode JS – JavaScript karanlık mod

Merhaba, bir projede ihtiyaç duyup yaptığım, gece modunu temaya eklemeyi anlatmak istiyorum.

<input type="checkbox" class="geceModu">

Checkbox input’a class veriyoruz. Gece modu açık mı kapalı mı işlemini kontrol edecek input.

jQuery dahil etmeyi unutmayın. jQuery 3.x

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

Logonun iki versiyonu olduğunu varsayalım, beyaz ve siyah versiyonu.
Fonksiyon ile kontrol ettirip hangi logonun gözükeceğini belirleyelim.

$(document).ready(function(){
    $(".geceModu").click(function(){
        var siyah = 'resim yolu/logo.png';
        var beyaz = 'resim yolu/logo-beyaz.png';
        if ($('.logo').attr('src') === beyaz) {
            $('.logo').attr('src', siyah);
        } else {
            $('.logo').attr('src', beyaz)
        }
    });
});

Şimdi bazı divlere örnekler ile eklemeler yaptıralım. Bunun için jQuery‘nin toggleClass özelliğini kullanıyoruz.

$("body,nav,.logo,.urun").toggleClass("night");

Yukarıda;
body, navbar (nav), .logo (class) .urun (class)
Bu belirlediklerimizin class’ına night değerini atadık. yani

ÖNCESİ  : <div class="urun">...</div>
SONRASI : <div class="urun night">...</div>

Şimdi .urun ve .night için css yazalım.

.urun {
    background:#fff;
    color:#000;
}
.night {
    background:#000 !important;
    color:#fff !important;
}

Burada olay !important
Important kullanarak önceki seçicinin özelliğini yok saymış oluyoruz.

css important nedir?

Örnekle yazıyı sonlandırmak istiyorum umarım faydalı olmuştur.

See the Pen gece modu by Hasan ÜNAL (@hasanunal) on CodePen.