<article>
  <h1>Change my colour by clicking the button 👇</h1>
  <button>Change colour</button>
</article>

:root {
  --text-color: rebeccapurple;
}

h1 {
  color: var(--text-color);
}

article.colour-change {
  --text-color: seagreen;
}

const article = document.querySelector("article");
const button = document.querySelector("button");

button.addEventListener("click", (evt) => {
  article.classList.toggle("colour-change");
});