当子元素具有不同的 `color-scheme` 时, `light-dark` 会出现问题

作者: foxt创建于 2024年9月30日更新于 2026年9月20日

如果您使用以下 HTML 代码：

xml

<p>此文本应具有黑色背景</p>
然后应用以下 CSS：
```css
:root {
  --background: light-dark(white, black);
  --text: light-dark(black, white);
}

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

文本将变为黑色文本在白色背景上，因为 color-scheme 设置为 dark。但是，如果将此 CSS 更改为由 lightningcss 生成的转译 CSS：

css

: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}

文本将变为白色在黑色上。我认为这是因为 polyfill 使用的 CSS 变量不会重新计算，如果子元素更改了任何输入变量，而 light-dark 似乎会这样做。目前，您需要在更改 color-scheme 的每个元素上重新应用 :root 主题变量。

内容来源: parcel-bundler/lightningcss

查看 GitHub 原文在 GitHub 查看讨论