<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>
    
    <p>Below is an example (exaggerated for effect) of what happens if we mistakenly combine two font-thinning solutions simultaneously. The "Our Mut-" heading text and "Plashwater Weir Mill Lock" body text have only the grade axis adjusted. The remaining heading and body text have a compounded effect from both the grade axis and font-weight being reduced at once.</p>
    
    <h1>Our Mut<span class="mixnmatch">ual Friend</span></h1>
    <p>Plashwater Weir Mill Lock <span class="mixnmatch">looked tranquil and pretty...</a></p>
  </article>
<body>
@font-face {
  src: url('https://hellogreg.github.io/fonts/RobotoFlex.woff2') format('woff2-variations');
  font-family: 'RobotoFlex';
  font-weight: 100 900;
}

:root {
  --GRAD: 0;
}

.darkmode {
    --background: #222;
    --color: #fff;
    --GRAD: -.85;
    --font-weight-multiplier: .40;
}

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

* {
  font-variation-settings: "GRAD" var(--GRAD, 0);
}

h1 .mixnmatch {
  font-weight: calc(var(--font-weight, 700) * var(--font-weight-multiplier, 1));
}

p .mixnmatch {
  font-weight: calc(var(--font-weight, 400) * var(--font-weight-multiplier, 1));
}

article {
  font-family: 'RobotoFlex', 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.