Does the CSS light-dark() function work in email? 

Dark mode support in email usually means writing your colors twice: once as your defaults, then again inside a prefers-color-scheme media query. The light-dark() CSS function was built to collapse that into a single declaration, and a recent update extended it from colors to images.

The question for email, as always, is whether the clients keep up. Support isn't wide yet, but there are real places you can use it today, including a new image-switching capability that landed in Thunderbird 150. This post walks through what the function does, what's new, and how to use it without breaking dark mode for clients that don't support it.

light-dark() works in email in a limited set of clients today, so the practical move is to treat it as a progressive enhancement and keep a prefers-color-scheme media query as your fallback. It works in Thunderbird, including the new image support in Thunderbird 150, and it can be combined with forced dark mode in clients like Samsung.

• light-dark() takes two values, a light one and a dark one, and returns the right one based on the active color scheme, without a media query.
• It requires the color-scheme property to be set to light dark, usually on :root.
• As of Firefox 150 and Chrome 150, light-dark() also accepts image values, so you can swap background images, not only colors.
• Thunderbird shares Firefox's engine, so the image support arrives in Thunderbird 150 too.
• Support across email clients is still limited, so pair it with a media-query fallback and use @supports to feature-detect the image variant.

It lets you declare a light value and a dark value in one line and returns whichever matches the reader's color scheme. Instead of setting a default color and then overriding it inside a media query, you write both values inline.

Here's the older pattern most email developers already know, using two color declarations and a media query. And here's the same result with light-dark():

The first value is used in light mode, the second in dark mode. The one requirement is that color-scheme is set to light dark for the function to resolve, which is why you'll usually see it declared on :root.

Yes. The function was originally limited to colors, but as of Firefox 150 and Chrome 150 it accepts image values as well, including url(), image-set(), gradients, and the none keyword. That means a single property can swap between a light and a dark background image based on color scheme:

Because this is newer than the color support, feature-detect it before relying on it. You can test for the image variant with @supports, since a gradient and the none keyword both count as image values:

Thunderbird is the clearest place to see light-dark() working in email. Thunderbird is built on the same engine as Firefox, so when the image support arrived in Firefox 150, it arrived in Thunderbird 150 as well. Switching the client to dark mode swaps both the colors and the background image as expected.

You can also use color-scheme to pin part of your email to a single scheme. Setting color-scheme: dark or color-scheme: light on an element forces that scheme regardless of the reader's setting, which is one way to work alongside forced dark mode in clients that convert colors automatically.

Support is limited today. Beyond Thunderbird, you can use light-dark() in a handful of places, such as Samsung, in combination with forced dark mode. Apple Mail runs on WebKit, and WebKit doesn't yet support the image variant, so the background-image use case won't reach the Apple Mail audience for now.

The reassuring part is that where color-scheme and light-dark() support exists, prefers-color-scheme media query support usually exists too, and that media query has broader reach across email clients. So you're rarely choosing between dark mode and no dark mode. You're choosing between a shorter syntax and a longer one, with the media query as the dependable path.

Treat light-dark() as a progressive enhancement layered on top of a media-query fallback. Set your dark mode colors with prefers-color-scheme so every client that supports dark mode is covered, then add light-dark() where you want the shorter syntax and the image-switching in clients that support it.

For email, this is a modest step forward rather than a leap, though a real step, and worth experimenting with now so you're ready as support grows. Build the reliable version first, enhance second.

Do I need to set color-scheme for light-dark() to work? Yes. The function only resolves when color-scheme includes both values, so set color-scheme: light dark, usually on :root. Without it, light-dark() won't return the value you expect.

Can light-dark() switch images, or only colors? Both, as of Firefox 150 and Chrome 150. It originally handled only colors, but it now accepts image values including url(), image-set(), gradients, and none, so you can swap background images by color scheme. Feature-detect the image variant with @supports before relying on it.

Which email clients support light-dark()? Thunderbird supports it, including image switching in Thunderbird 150, and you can use it in clients like Samsung alongside forced dark mode. Support is still limited across email clients overall, so don't treat it as universal.

What's the fallback if a client doesn't support light-dark()? Use a prefers-color-scheme media query for your dark mode colors. Media query support is broader in email than light-dark() support, so it covers clients that don't yet understand the function.

How is light-dark() different from a prefers-color-scheme media query? They produce the same result, but light-dark() does it inline in a single declaration rather than in a separate media query block. The media query has wider email client support today, so light-dark() is best used as an enhancement rather than a replacement.

Mark tests new CSS features against real email clients on the Mr. Email Dev channel, so you know what works before you ship it. Subscribe on YouTube for each new "Does it Email?" walkthrough.