Giriş yap
Dark-Light Checkbox Yapımı?

Herkese merhaba;

Aşağıdaki projeme dark-light teması yapmak istiyorum. Nasıl yapılacağına dair mantığını anlatabilir misiniz?

<b>Proje Ön Bilgi:</b>
Her sabah,
Dijital projelerden haberdar ol.
Amacımız en son mobil uygulamalarını, web sitelerini, donanım projelerini ve teknoloji kreasyonlarını paylaşmak ve dijital ürünlerinin meraklısına ulaştırmaktır. Ve en önemlisi e-posta okuma alışkanlığını kazandırmaktır.

https://siyahklasor.com

Not: Teknoloji meraklıları e-posta adreslerini bırakabilirler ;)

haciyeff
236 gün önce

css dosyanızı buna uygun şekilde düzenleyip daha sonra tasaımın içtediğiniz kısmına dark/light adlı bir
buton koyarak her kliklendiğinde body'e dark adlı classı eklemesini ve silmesini sağlayabilirsiniz.

.box {
  background: #fff;
}
.form-control {
  background: #eee;
}
body.dark .box {
  background: #000;
}
body.dark .form-control {
  background: #333;
}

Fakat bu zaman sayfa yenilendiğinde tekrardan light tema gözükecektir. Bunun için seçilen temayı localstorage'de bir değere tanımlamamız gerekiyor. ver her defa dom yüklendiğinde localstorageden değeri alıp bodye eklemesi gerekiyor.

document.addEventListener('DOMContentLoaded', () => {
  if (localStorage.getItem("theme") == "dark" && !document.body.classList.contains('dark')) {
    document.body.classList.add(localStorage.getItem("theme"));
  }
});

function changeTheme(){
  if (localStorage.getItem("theme") == "dark") {
    localStorage.setItem("theme","");
    document.body.classList.add('dark');
  }else{
    localStorage.setItem("theme","dark");
    document.body.classList.remove('dark');
  }
}

haciyeff
236 gün önce

Düzeltme

changeTheme foksiyonunda if else kısmındaki doma dark class'ını basmanı yanlış kontrol etmiştim. Aşağıdaki gibi olmalı

function changeTheme(){
  if (localStorage.getItem("theme") == "dark") {
    localStorage.setItem("theme","");
    document.body.classList.remove('dark');
  }else{
    localStorage.setItem("theme","dark");
    document.body.classList.add('dark');
  }
}

Nasıl akıllıca soru sorulur?
Daha hızlı ve kaliteli cevaplar almak için önce nasıl soru sorulacağını bilmeniz gerekir. Eğer bilmiyorsanız bu yazı serisini okuyun.

Cevap yaz

Günlük Film Tavsiyesi