<span class="btn">button</span>

<div class="controls">
  <span class="add-inverted">Add "inverted" class</span>
  <span class="remove-inverted">Remove "inverted" class</span>
</div>

.btn {
  --shadow-color: #777;
  --gradient-from-color: #3498db;
  --gradient-to-color: #2980b9;
  --color: #ffffff;
  
  background-image: linear-gradient(to bottom, var(--gradient-from-color), var(--gradient-to-color));
  text-shadow: 1px 1px 3px var(--shadow-color);
  box-shadow: 0px 1px 3px var(--shadow-color);
  border-radius: 28px;
  color: var(--color);
  padding: 10px 20px 10px 20px;
}

body.inverted .btn{
  --shadow-color: #888888;
  --gradient-from-color: #CB6724;
  --gradient-to-color: #D67F46;
  --color: #000000;
}



.btn{
  display: inline-block;
}
.controls{
  margin-top: 20px;
  display: flex;
}

.controls span{
  border: 1px solid #aaa;
  border-radius: 5px;
  margin-right: 5px;
  padding: 3px;
  cursor: pointer;
}

const invertedClass = "inverted";
const addInvertedEl = document.querySelector('.add-inverted');
const removeInvertedEl = document.querySelector('.remove-inverted');

addInvertedEl.addEventListener('click', ()=>{
  document.body.classList.add(invertedClass);
});

removeInvertedEl.addEventListener('click', ()=>{
  document.body.classList.remove(invertedClass);
});