<p>
  <label class="check">
    <input type="checkbox" id="invert" />
    Invert colors
  </label>
</p>
<p>
  <label class="check">
    <input type="checkbox" id="rotate" />
    Also rotate hue (only applies when inverted)
  </label>
</p>
<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: flex;
  align-items: center;
}

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

img {
  max-width: 100%;
}

.inverted {
  filter: invert(100%);
  background-color: #333;
}

.inverted.rotated {
  filter: invert(100%) hue-rotate(180deg);
}
const invertToggle = document.querySelector("#invert");
const rotateToggle = document.querySelector("#rotate");
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'));
rotateToggle.addEventListener('input', classToggleFn('rotated'));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.