v150 · CSS

CSS light-dark() with image values

The light-dark() function now accepts image values — url(), image-set(), none — so background-image, border-image, list-style-image, and content can automatically switch assets between light and dark modes without any media queries or JavaScript.

concepts

  1. Adaptive Backgrounds

    Cards with background-image: light-dark(url(light.svg), url(dark.svg)) — toggle between light and dark mode and the background asset swaps automatically, honouring the cascade.

  2. Theme-Aware Icons

    Inline SVG icons referenced via background-image: light-dark(url(icon-dark.svg), url(icon-light.svg)) on icon elements — the icon inverts as the color scheme changes, all in CSS.

  3. Conditional Decorations

    Use light-dark(url(…), none) to show a DRAFT watermark only in light mode, and light-dark(none, url(…)) to render a starfield only in dark mode. Four distinct patterns — checkmarks, watermarks, starfields, and list bullets — all toggled with a theme preview.

  4. Border Image Swap

    Use light-dark() inside border-image to flip decorative SVG frame patterns between light and dark mode. Four cards show stripes, dots, a gradient accent, and a border that only appears in light mode (none in dark) — all from a single CSS rule per card, no media query.

  5. List Style Bullets

    Swap bullet icon SVGs between color schemes using list-style-image: light-dark() and content: light-dark() on ::before pseudo-elements. Four list styles — checkmarks, arrows, numbered badges, and status icons — all adapt to the active scheme without a single media query.

  6. light-dark() + image-set() combo

    Nest image-set() inside light-dark() to serve four image variants from a single declaration: light@1x, light@2x, dark@1x, dark@2x. Toggle theme and device pixel ratio to see which variant the browser would select — zero media queries, zero JavaScript.

why it shipped

light-dark() shipped in Chrome 123 for color values, letting you write color: light-dark(#000, #fff) instead of a prefers-color-scheme media query. But image properties — background-image, border-image, list-style-image, content — couldn't use it, forcing developers to reach for a media query just to swap a logo or decorative asset. This extension completes the picture: the same single-property, zero-media-query pattern now works for images too, making truly portable, theme-aware design tokens possible in CSS alone.

references

implementation reference

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