Software1 hOctober 28, 2026, 15:30

CSS light-dark() now swaps images based on color scheme

The CSS light-dark() function now accepts images as well as colors, picking one of two arguments based on the element's color-scheme. As of September 14, 2026 it works in Chrome, Edge, Firefox and Safari, reaching Baseline newly available status.

DEV Community

Open source

CSS light-dark() now swaps images based on color scheme

light-dark() takes two images or none and picks by the element's color-scheme
Supported in Chrome and Edge 150, Firefox 150 and Safari 27
Each side takes a single image; layers need separate calls
Works with list-style-image as well as background-image

#Chrome#Firefox#Safari#CSS

CSS contrast-color() picks white or black text for any background

Software

CSS field-sizing becomes Baseline: inputs now grow with content

Software

CSS gains progress(), alpha() and revert-rule across all engines

Software

CSS light-dark() now swaps images based on color scheme

CSS contrast-color() picks white or black text for any background

CSS field-sizing becomes Baseline: inputs now grow with content

CSS gains progress(), alpha() and revert-rule across all engines

CSS gains shape(), border-shape and corner-shape to break the web out of boxes