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

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

html[data-theme="light"] {
  --bg-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.