[v4] How to use dark/light mode custom varialbes defined in :root in @theme directive?

[IvanKalinin]

Here is a code example that works fine with tailwind v3 and tailwind.config.js but does not in v4 and @theme directive.

<div>
  <div class="w-48 h-48 bg-main border"></div>
</div>

<div data-mode="dark">
  <div class="w-48 h-48 bg-main border"></div>
</div>

:root {
  --v3-color-mono-100: #ffffff;
}

:is([data-mode="dark"]) {
  --v3-color-mono-100: #111111;
}

@theme {
  --background-color-main: var(--v3-color-mono-100)
}

https://play.tailwindcss.com/3wmtDX8LP5

The browser understands the overridden value, but computed value in light

And the same thing with config.
https://play.tailwindcss.com/J2UDUtnjyT?file=config

[adamwathan]

Hey! Use the inline option so the value isn't replaced with an intermediary variable:

https://play.tailwindcss.com/qmeTzW2qnp?file=css

Need to document this soon 👍