<picture>
<source srcset="https://www.w3cplus.com/sites/default/files/blogs/2021/2112/dark.png" media="(prefers-color-scheme: dark)">
<source srcset="https://www.w3cplus.com/sites/default/files/blogs/2021/2112/light.png" media="(prefers-color-scheme: light)">
<img src="https://www.w3cplus.com/sites/default/files/blogs/2021/2112/light.png" alt="" />
</picture>
body {
margin: 0px;
padding: 0px;
width: 100vw;
min-height: 100vh;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
img {
max-height: 100vh;
}
:root {
color-scheme: dark light;
--color: #333;
--body-bg-color: #f1f1f1;
}
@media (prefers-color-scheme: dark) {
:root {
--color: #fff;
--body-bg-color: #1a1818;
}
}
body {
background-color: var(--body-bg-color);
color: var(--color);
}
picture {
max-height: 100vh;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.