Edit in JSFiddle

:root {
  --text-for-light: black;
  --bkg-for-light: lightgray;
  --text-for-dark: gray;
  --bkg-for-dark: black;
}

body {
  background-color: var(--bkg-for-light);
  color: var(--text-for-light);
  font-family: sans-serif;
  font-weight: 450;
}


/* Start with native detection */
@media (prefers-color-scheme: dark) {
  body {
    color: var(--text-for-dark);
    background-color: var(--bkg-for-dark);
  }
}

/* Apply colors based on toggled class */
.dark-mode {
  color: var(--text-for-dark);
  background-color: var(--bkg-for-dark);
}

.light-mode {
  color: var(--text-for-light);
  background-color: var(--bkg-for-light);
}

var theme, prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
if (prefersDarkScheme.matches)
    theme = document.body.classList.contains("light-mode") ? "light" : "dark";
else
    theme = document.body.classList.contains("dark-mode") ? "dark" : "light";
/* localStorage.setItem("theme", theme); */

function toggle() {
    var currentTheme = theme;
    if (currentTheme == "dark")
        document.body.classList.toggle("light-mode");
    else if (currentTheme == "light")
        document.body.classList.toggle("dark-mode");
}

Hello, hacky world.

<button onclick="toggle()">Toggle Light/Dark Mode</button>