chaves de temas

by Marcos vini

HTML

<div class="um">
  <h1>Chave de temas</h1>
  <button type="button">Tema vermelho</button>  
  <button type="button">Tema verde</button>
  <button type="button">Tema roxo</button>
</div>

CSS

:root {
--tema-bgDiv: #00BCD4;
--tema-corDiv: #ffff;
--tema-corTitle: #ffff;
--tema-bgBody: #f4f4f4;
}
:visited,:active,:link,:focus{
  outline:none;
  text-decoration:none;
}
.tema-vermelho{
  --tema-bgDiv: #ff0000; 
--tema-corDiv: #e40404;
--tema-corBorda: #d17a7a;
--tema-bgBody: #f4f4f4;
}
.tema-verde{
  --tema-bgDiv: #4CAF50; 
--tema-corDiv: #3f9642;
--tema-corTitle: #8ad1aa;
--tema-bgBody: #f4f4f4;
}
.tema-roxo{
  --tema-bgDiv: #9932cc; 
--tema-corDiv: #003300;
--tema-corTitle: #c284e0;
--tema-bgBody: #f4f4f4;
}
body {
  font: 100%/1.4 sans-serif;
  background: var(--tema-bgBody);
 margin:0;
}
h1{
      margin: 0;
    padding-top: 30px;
}
.um {
min-height:500px;
  margin: 0 auto;
  text-align: center;
 background: var(--tema-bgDiv);
  color: var(--tema-corTitle);
 
}
button {
  border: 2px solid   var(--tema-corDiv);
  background: var(--bgDiv);
  color: #ffffcc;
  margin: 10px 5px;
  padding: 5px 15px;
  border-radius: 4px;
  cursor: pointer;
}

JavaScript

const cores = [ { class: "tema-vermelho" },
 {class: "tema-verde"}, {class: "tema-roxo"}];
const secaoHead = document.querySelector('head'); 
const um = document.querySelector('.um');
let btn = document.querySelectorAll('button');	
  btn.forEach(function(bt, chave){
bt.addEventListener('click', function(){
     document.body.setAttribute('class','')
    document.body.classList.add(cores[chave].class);
	
	})
  });