<label>
  dark mode: 
  <input type="checkbox" id="darkmode-toggle" />
</label>
<div>test</div>
div {
  width: 10rem;
  height: 10rem;
  border: 5px solid gray;
  background-color: white;
  color: black;
}

html[data-theme="dark"] div {
  background-color: black;
  color: white;
}

html[data-theme="light"] div {
  background-color: beige;
  color: black;
}

const $darkmodeToggle = document.querySelector('#darkmode-toggle');

$darkmodeToggle.addEventListener('change', ({target}) => {
  document.documentElement.dataset.theme = (target.checked) ? 'dark' : 'light'
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.