lightningcss icon indicating copy to clipboard operation
lightningcss copied to clipboard

`light-dark` is broken when children have different `color-scheme`'s

Open foxt opened this issue 1 year ago • 1 comments

If you take the following HTML

<p>This text should have a black background</p>

And apply the following CSS:

:root {
  --background: light-dark(white, black);
  --text: light-dark(black, white);
}

p {
  color: var(--text);
  background: var(--background);
  color-scheme: dark;
}

The text changes to white text on black background, as expected because color-scheme is set to dark.

However, change this to the transpiled CSS generated by lightningcss

:root{--background:var(--lightningcss-light,#fff)var(--lightningcss-dark,#000);--text:var(--lightningcss-light,#000)var(--lightningcss-dark,#fff)}p{color:var(--text);background:var(--background);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}

And the text is black on white. I believe this is because the polyfill uses css variables which do not recompute if child elements change any of the input variables, where as light-dark seems to do. You currently need to re-apply the :root theme variables on every element that changes color-scheme

foxt avatar Sep 30 '24 10:09 foxt