CSS light-dark() playground

Choose a background color and image for each color scheme. CSS selects the first argument in light mode and the second in dark mode. Color and image variants have independent support.

light-dark()

CSS · color-scheme

This browser does not support light-dark() with colors. The background color is not applied.

HTML

<article class="light-dark-demo">
  <div class="demo-image" aria-hidden="true"></div>
  <h2>light-dark()</h2>
  <p>CSS · color-scheme</p>
</article>

CSS

.light-dark-demo {
  color-scheme: light dark;
  color: CanvasText;
  background-color: light-dark(#fff5e6, #182449);
  padding: 1rem;
}

.light-dark-demo .demo-image {
  min-block-size: 10rem;
  background-image: none;
  background-size: cover;
  background-position: center;
}

@supports (background-image: light-dark(linear-gradient(135deg, #fff1cc, #ff9566), linear-gradient(135deg, #182449, #7854ad))) {
  .light-dark-demo .demo-image {
    background-image: light-dark(linear-gradient(135deg, #fff1cc, #ff9566), linear-gradient(135deg, #182449, #7854ad));
  }
}

.light-dark-demo {
  color-scheme: light dark;
  color: CanvasText;
  background-color: light-dark(#fff5e6, #182449);
  padding: 1rem;

  .demo-image {
    min-block-size: 10rem;
    background-image: none;
    background-size: cover;
    background-position: center;

    @supports (background-image: light-dark(linear-gradient(135deg, #fff1cc, #ff9566), linear-gradient(135deg, #182449, #7854ad))) {
      background-image: light-dark(linear-gradient(135deg, #fff1cc, #ff9566), linear-gradient(135deg, #182449, #7854ad));
    }
  }
}