<p>
  <label class="check">
    <input type="checkbox" id="invert" />
    ダークモード切り替え
  </label>
</p>

<p><img src="https://source.unsplash.com/weekly?water">
<iframe src="https://player.vimeo.com/video/162413069?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
<p><a href="https://vimeo.com/162413069">Bangkok Travel</a> from <a href="https://vimeo.com/brianpineda">Brian Maranan Pineda</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis consequuntur nam ad esse sint, commodi sunt officia libero eum? Rerum odit explicabo culpa neque unde. Voluptate officiis sit magnam et.</p>
<p><a href="https://daneden.me">Dan Eden’s Website</a></p>

html {
  font: 125%/1.5 -apple-system, system-ui;
  color: #333;
  background-color: #fff;
}

body {
  max-width: 30rem;
  margin: 0 auto;
}

a {
  color: #e33d26;
}

.check {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}

.check > input {
  margin-right: .75em;
}

img {
  max-width: 100%;
}

.inverted {
filter: invert(100%) hue-rotate(180deg);
}


.inverted img,
.inverted iframe{filter: invert(100%) hue-rotate(180deg);
}

const invertToggle = document.querySelector("#invert")
const doc = document.documentElement

const classToggleFn = className => e => {
  if(e.target.checked) {
    doc.classList.add(className)
  } else {
    doc.classList.remove(className)
  }
}

invertToggle.addEventListener('input', classToggleFn('inverted'))