Playground de light-dark() en CSS

Elige un fondo y una imagen para cada esquema de color. CSS selecciona el primer argumento en claro y el segundo en oscuro. Las variantes de colores e imágenes tienen soporte independiente.

light-dark()

CSS · color-scheme

Este navegador no soporta light-dark() con colores. El color de fondo no se aplica.

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