JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<h1> Select a theme to change the color scheme! </h1>
	<div id="scheme">
		<button id="auto">Auto</button>
		<button id="default">Default</button>
		<button id="light">Light</button>
		<button id="dark">Dark</button>
		<button id="blue">
		<svg width="20" height="20">
			<rect width="20" height="20" style="fill: lightgrey; stroke-width:1px; stroke: red;" />
		</svg>
		</button>
	</div>

CSS

:root.default { --bgr: #eee; --txt: #000; }
:root.light { --bgr: #ddc; --txt: #446; }
:root.dark { --bgr: #222; --txt: #a75; }
:root.blue { --bgr: #246; --txt: #eec; }
body { background: var(--bgr); color: var(--txt); margin: 1.5rem; }

#scheme button {
border: 1px solid red;
background: none;
color: inherit;
text-decoration: underline;
cursor: pointer;
}

JavaScript

/* Besworks Hot Theme Without Memory Problems
https://github.com/besworks/theme-selector */

let prefersDark = matchMedia('(prefers-color-scheme: dark)');
prefersDark.addEventListener('change', event => loadTheme());

function setTheme(theme) {
  if (theme == 'auto') {
	localStorage.removeItem('theme');
	loadTheme(null);
  } else {
	localStorage.setItem('theme', theme);
	applyTheme(theme);
  }
}

function loadTheme(theme) {
  theme = localStorage.getItem('theme');
  theme ??= (prefersDark.matches) ? 'dark' : 'default';
  applyTheme(theme);
}

function applyTheme(theme) {
  document.documentElement.className = theme;
}

window.setTheme = setTheme;

loadTheme();



 let selector = document.getElementById('scheme');
  selector.addEventListener('click', event => {
    if (event.target == selector) { return; }
    window.setTheme(event.target.id);
  });