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

  <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>

  <input type="checkbox" name="Toggle" id="darkmode" />
  <label for="darkmode">Dark Mode</label>
: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) {
  } else {

function initDarkMode() {

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

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


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.