← Chrome 150 reference

v150 · covered on mdn

CSS light-dark() with image values

Extends light-dark() to accept <image> values — url(), image-set(), gradients, and none — in addition to colours, so that properties like background-image, border-image, and list-style-image can switch between light and dark variants declaratively.

this API is documented on MDN

light-dark() CSS function — CSS — MDN Web Docs

gendn doesn't duplicate APIs that MDN already covers. MDN's light-dark() page documents both the colour and image value syntaxes including examples for url(), image-set(), and gradient arguments. Chrome 150 ships the image-value extension that aligns with the CSS Color 5 spec and Firefox's existing implementation.

quick example

/* Works in Chrome 150+ for image-accepting properties */
.card {
  background-image: light-dark(
    url("light-bg.webp"),
    url("dark-bg.webp")
  );
  cursor: light-dark(
    url("cursor-light.png") 4 4, auto,
    url("cursor-dark.png") 4 4, auto
  );
}

The function returns the first argument when the active color-scheme is light and the second when it is dark. As with the colour form, the containing element (or :root) must declare color-scheme: light dark.

references