Karanlık ve bir çok tema desteği
Merhabalar,
Tayfun hocamın : https://www.youtube.com/watch?v=S7yvpi3lplc
Videosunda ki karanlık mod için, birden fazla tema desteği nasıl yapabiliriz?
Ve label input ile değil sıralı seçme şeklinde nasıl yapabiliriz?
İlk olarak teker teker temalar için renkleri oluşturup bütün elementlere bunu vermen gerek.
Temaları listeleyip onclick olduğunda body'e örnek primary class'ını verirsin.Aşağıdaki kodu her desteklemek istediğin renk paketi için yazman gerek
body.primary{
background:'aqua'
}
body.primary p{
color:black
}
Renk kodlarını aşağıdaki gibi listeleyebilirsin.
<ul>
<li data-theme="default">Default</li>
<li data-theme="primary">Primary</li>
<li data-theme="dark">Dark</li>
</ul>
Tıklandığında body'e data-theme içerisinde yazdığımız değeri class olarak veriyoruz.
const colorPickers = document.querySelectorAll('ul li');
colorPickers.forEach((picker) => {
picker.addEventListener("click",function(){
document.body.classList.remove("default", "primary", "dark");
const theme = this.dataset.theme
if(theme === "default")
return;
document.body.classList.add(theme)
})
})
Devamı senin projene göre şekillenir