Consider Theme Switcher (vs system mode only)

[fuzzzerd]

Extracted from demo:

html[data-theme="dark"] {
  --background: var(--background-dark);
  --accent-background: var(--accent-background-dark);
  --text: var(--text-dark);
  --text-light: var(--text-light-dark);
}

html[data-theme="light"] {
  --background: var(--background-light);
  --accent-background: var(--accent-background-light);
  --text: var(--text-light);
  --text-light: var(--text-light-light);
}

html.theme-switch,
html.theme-switch *,
html.theme-switch *:before,
html.theme-switch *:after {
  transition: all 650ms !important;
  transition-delay: 0 !important;
}

and the markup:

<h2 id="themeswitcher">Theme Switcher</h2>
<input
  type="radio"
  id="light"
  name="theme-name"
  value="light"
  onclick="setTheme('light')"
/>
<label for="light">light</label><br />
<input
  type="radio"
  id="dark"
  name="theme-name"
  value="dark"
  onclick="setTheme('dark')"
/>
<label for="dark">dark</label><br />

<input
  type="radio"
  id="high-contrast"
  name="theme-name"
  value="high-contrast"
  onclick="setTheme('high-contrast')"
/>
<label for="high-contrast">high-contrast</label><br />
<script>
  function setTheme(theme) {
    document.documentElement.classList.add("theme-switch");
    document.documentElement.setAttribute("data-theme", theme);
    window.setTimeout(function () {
      document.documentElement.classList.remove("theme-switch");
    }, 1000);
  }
</script>