JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="container">
      <h1>My beautiful theme</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Repellat nihil nisi quidem pariatur optio iste vero id velit deleniti tenetur, sit deserunt.
      </p>
      <button id="theme-switcher">Switch theme!
      </button>
    </div>
</body>

CSS

:root {
  --background: #f7fafc;
  --container: #edf2f7;
  --text-primary: #1a202c;
}

.dark {
  --background: #4a5568;
  --container: #2d3748;
  --text-primary: #f7fafc;
}

body {
  background-color: var(--background);
  font-family: sans-serif;
  color: var(--text-primary);
}

.container {
  background-color: var(--container);
  padding: 10px;
  text-align: center;
}

JavaScript

if(localStorage.getItem('theme') === "dark") {
	document.body.classList.toggle(localStorage.getItem('theme'));
}

const themeSwitcher = document.getElementById('theme-switcher');

themeSwitcher.addEventListener('click', function() {
	document.body.classList.toggle('dark');
  localStorage.setItem('theme', document.body.classList);
})