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.
Not: Teknoloji meraklıları e-posta adreslerini bırakabilirler ;)
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (2)
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');
}
}
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');
}
}