Karanlık ve bir çok tema desteği | Cevap #12128

İ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