Bram.us
Read post

More Easy Light-Dark Mode Switching: light-dark() is about to support images!

The CSS `light-dark()` function is being extended beyond colors to support `<image>` values, allowing developers to swap background images, masks, and logos based on color scheme in a single declaration. This eliminates the need for repetitive `@media (prefers-color-scheme)` blocks and respects local `color-scheme` overrides. Browser support is early: available behind a flag in Chromium 148+, shipping in Firefox 150 (stable April 2026), and not yet supported in Safari. A `@supports` detection snippet using `linear-gradient()` is provided for progressive enhancement. For non-color, non-image values, a 3-line CSS Custom Function workaround is also shown.

    #css
Mar 19•4m read time•From bram.us
Post cover image
Table of contents
The Missing PieceBrowser SupportFeature DetectionBut what about non- <color> and non- <image> values?
153.9K Impressions3 Comments
Bram.us's image
Bram.us

Bram.us, curated by Bram Van Damme, is a web development blog offering tutorials, guides, and insig...

137 Followers

•

2.3K Upvotes

Would you recommend this post?

Copy link
WhatsApp
Facebook
X
New Squad
  • © 2026 Daily Dev Ltd.
  • Guidelines
  • Explore
  • Tags
  • Sources
  • Squads
  • Leaderboard