<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;
}