JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
  <div class="box"></div>
  <button id="toggle">Toggle theme</button>
</div>

CSS

:root {
  --border-color: blue;
  --border: 1px solid var(--border-color);
  --bg: #ccc;
}

.box {
  padding: 8px;
  border: var(--border);
  background-color: var(--bg);
}

.dark {
  --border-color: black;
  --bg: pink;
}

JavaScript

const toggle = document.getElementById('toggle');
const app = document.getElementById('app');
const toggleClass = 'dark';

toggle.addEventListener('click', () => app.classList.toggle(toggleClass));