JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <body data-theme="classic">
    <div class="component">
      theme
    </div>
    <button class="btn-theme" data-theme="classic">classic</button>
    <button class="btn-theme" data-theme="blue">blue</button>
    <button class="btn-theme" data-theme="red">red</button>
    <button class="btn-theme" data-theme="gray">gray</button>
  </body>

</html>

CSS

[data-theme="classic"] {
  --bg: #f0f0f0;
  --color: black;
}

[data-theme="blue"] {
  --bg: blue;
  --color: white;
}

[data-theme="red"] {
  --bg: #900;
  --color: white;
}

[data-theme="gray"] {
  --bg: #444;
  --color: white;
}

.component {
  background-color: var(--bg);
  color: var(--color);
  height: 100px;
  width: 100px;
}

JavaScript

document.querySelectorAll('.btn-theme').forEach((item) => {
  item.addEventListener('click', (event) => {
    window.localStorage.setItem('theme', item.dataset.theme);
    document.body.dataset.theme = localStorage.theme;
  });
});

window.onload = function() {
  document.body.dataset.theme = localStorage.theme;
}