<body class="darkmode">
  <article>
    <label for="checkdark">Toggle dark mode:&nbsp;
      <span class="switchzone">
        <input id="checkdark" type="checkbox" checked><span class="toggler"></span>
      </span>
    </label>
    
    <h1>Our Mutual Friend</h1>
    <p>Plashwater Weir Mill Lock looked tranquil and pretty...</p>
  </article>
<body>
@font-face {
  src: url('https://hellogreg.github.io/fonts/SourceSans3VF-Roman.ttf.woff2') format('woff2-variations');
  font-family: 'SourceSans';
  font-weight: 100 900;
}

/* DEFAULT CSS CUSTOM PROPERTIES */
:root {
  --font-weight: 400;
  --font-weight-multiplier: 1;
  --letter-spacing: 0;
}

strong, b, th, h1, h2, h3, h4, h5, h6 {
  --font-weight: 700;
}

/* DARK MODE CSS CUSTOM PROPERTIES */
.darkmode {
    /* Variables to set the dark mode bg and text colors for our demo. */
    --background: #222;
    --color: #fff;

    /* Variables that affect font appearance in dark mode. */
    --font-weight-multiplier: .85;
}

/* APPLYING CSS STYLES... */
*, *::before, *::after {
  font-weight: calc(var(--font-weight, 400) * var(--font-weight-multiplier, 1));
}

body {
  background: var(--background, #fff);
  color: var(--color, #222);
}

article {
  font-family: 'SourceSans', system-ui, sans-serif;
  font-size: 1.5rem;
  margin: 0 auto;
  max-width: 60rem;
  width: 94vw;
}

/* Dark mode toggle button styles */

.switchzone{position:relative;display:inline-block;width:2.5rem;height:1.25rem;top:.5rem;}.switchzone input{opacity:0;width:0;height:0}.switchzone .toggler{border-radius:1.25rem;position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc}.switchzone .toggler:before{border-radius:50%;position:absolute;content:"";height:1.25rem;width:1.25rem;background-color:#222}.switchzone input:checked+.toggler{background-color:#555}.switchzone input:focus+.toggler{-webkit-box-shadow:0 0 1px #555;box-shadow:0 0 1px #555}.switchzone input:checked+.toggler:before{-webkit-transform:translateX(1.25rem);transform:translateX(1.25rem);background-color:#fafafa}
document.getElementById("checkdark").addEventListener("change", e => {
  if (e.target.checked) {
    document.body.classList.add("darkmode");
  } else {
    if (document.body.classList.contains("darkmode")) {
      document.body.classList.remove("darkmode");
    }
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.