<div class="light">
  Light box
</div>

<div class="dark">
  Dark box
</div>

<div>
  Automatic box
</div>
:root {
  color-scheme: light dark;
}

div {
  padding: 1rem;
  margin: 1rem;
  color: light-dark(black, white);
  background: light-dark(ghostwhite, darkslategray);
}

.light {
  color-scheme: light;
}

.dark {
  color-scheme: dark;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.