Support CSS `light-dark()` generation

[gossi]

Summary

When tokens are turned into CSS for light and dark color scheme, this is usually done with a media query and a lot of code duplication.

Luckily CSS has a light-dark() function, that can be used for that. In order to generate such code, you need access to both the light and dark value of a token at the same time.

My first question isn't about Terrazzo generating the code, but having the dataset to do so (directly or per plugin). Since DTCG spec is 1.0 it has support for modes but - as much as I understood it - a token never has access to multiple mode values at the same time (I'm happy to be wrong here)? Is there spec work needed or is the modes spec sufficient enough?

Proposal & prior art

I've done this as a plugin for style dictionary myself as part of Theemo and used a different way of storing these permutations of value on a token (I refer to them as constrained token/value):

• https://theemo.io/theming/build/css-custom-properties-light-dark
• https://gos.si/blog/theemo-v1-0-design-tokens-from-figma-into-css-with-property-light-dark-and-color-functions

If spec work is needed, which surely is lower-level than modes, I think I researched the prior art myself.

Also I know timing wise the industry is implementing the stable token spec at first. We had a lovely session about this, now I remembered to put it into an issue :)

Extra

• I’m willing to open a PR (see CONTRIBUTING.md)

[drwpow-figma]

So Terrazzo does support color-scheme already; would this conflict with that?

---

My first question isn't about Terrazzo generating the code, but having the dataset to do so (directly or per plugin). Since DTCG spec is 1.0 it has support for modes but - as much as I understood it - a token never has access to multiple mode values at the same time (I'm happy to be wrong here)? Is there spec work needed or is the modes spec sufficient enough?

I think there may be some confusion. “modes” is something Terrazzo has supportted as an extension and has always been nonstandard. The new 2025.10 stable spec outlines a different mechanism called “modifier contexts” which can work out to roughly the same-you can say a token “has access to all its modes” in a sense. But to avoid confusion we didn’t use the term “mode” in the DTCG spec because that is a loaded term that has some confusing connotations.

All that to say, maybe we could split out this discussion on modes/Resolvers to a new discussion? And keep this more focused on proposing how light-dark() may work in CSS, or if the existing color-scheme support is sufficient

[gossi]

Oups, yes - I did mix up names. Can "modifier contexts" be used to generate light-dark().

Let's take the Per-Mode Color Schemes example. Can this be outputted as:

:root {
  color-scheme: light dark;
  --color-bg: light-dark(#ffffff, #1a1a1a);
}

[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
}

Is that possible with "modifier contexts"/resolver spec?

[drwpow]

Is that possible with "modifier contexts"/resolver spec?

Of course! Light/dark is the literal example in the specification 🙂. This is quite literally the reason it was created

[drwpow]

Terrazzo will get support for the Resolver Module in the next major release, which is currently in development (Resolver spec was only finalized a little over a week ago). But we’ll update the docs on how this can be done using existing $extensions.mode, or using token resolvers.