<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'))
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.