v150 · CSS · demo

Adaptive Backgrounds

Cards with background-image: light-dark(url(…), url(…)) — toggle the color scheme and every background asset switches automatically. No media queries, no JavaScript, no class-toggling.

Chrome 150+ — requires light-dark() with image values. Use the toggle below or your OS system setting to switch color schemes.

Alternating stripes

background-image: light-dark(url(light-stripes.svg), url(dark-stripes.svg))

Dot matrix

background-image: light-dark(url(light-dots.svg), url(dark-dots.svg))

Grid lines

background-image: light-dark(url(light-grid.svg), url(dark-grid.svg))

/* One property — two images — zero media queries */
:root { color-scheme: light dark; }

.card {
  background-image: light-dark(
    url("light-pattern.svg"),   /* used in light mode */
    url("dark-pattern.svg")     /* used in dark mode  */
  );
}

/* Previously required a media query: */
.card { background-image: url("light-pattern.svg"); }
@media (prefers-color-scheme: dark) {
  .card { background-image: url("dark-pattern.svg"); }
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗