<h1>So this only super works under two circumstances</h1>

<ul>
  <li>You have one of following browsers: Chrome 76, Firefox 67 or Safari 12.1</li>
  <li>And you're using your systems dark mode.</li>
</ul>

<div>
  <input type="checkbox" name="Toggle" id="darkmode" />
  <label for="darkmode">Dark Mode</label>
</div>
:root {
  --dark: #333;
  --light: #f7f7f7;
  --background: var(--light);
  --color: var(--dark);
}

.DarkMode {
  --background: var(--dark);
  --color: var(--light);
}

html {
  background: var(--background);
  color: var(--color);
}

/* Not super relevant to the demo */

html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

ul {
  font-size: 125%;
}
const checkbox = document.querySelector('input[type="checkbox"]');
const root = document.querySelector("html");

function checkSystem() {
  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 
  if (prefersDark) {
    root.classList.add("DarkMode");
  } else {
    root.classList.remove("DarkMode")
  }
}

function initDarkMode() {
  checkSystem();

  if (root.classList.contains("DarkMode")) {
    checkbox.setAttribute("checked", true);
  }

  checkbox.addEventListener("change", (event) => {
    root.classList.toggle("DarkMode");
    const isDarkMode = root.classList.contains("DarkMode");
    checkbox.setAttribute("checked", isDarkMode)  
  });
}


initDarkMode()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.