v2.5.2
Giriş yap

Karanlık ve bir çok tema desteği

erdal42
292 defa görüntülendi

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?

devepdogukan
457 gün önce

İ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