如何在:root和for全局变量中触发偏好配色方案？

Question

我有一个类似下面的scss代码：

:root {
  ...some global color related variables
  @media (prefers-color-scheme: dark) {
    ...global colors are overwritten 
  }
}

我有一个在暗模式和亮模式之间切换的按钮，它的javascript代码是这样工作的：

document.documentElement.style = `color-scheme: ${mode};`; // mode is either light or dark
const meta = document.querySelector('meta[name="color-scheme"]');
meta.content = mode; // mode is either light or dark

它将其样式color-scheme: light or dark应用于html元素和所有其他元素，但它不会在与:root和全局变量相关的样式中触发prefers-color-scheme，甚至不会触发其他地方的样式。我怎么才能做到这一点呢？

PS1:当我使用chrome浏览器本身(在开发工具中使用Emulate CSS prefers-color-scheme: dark )更改网站的配色方案时，它工作得很好，并且全局变量会被覆盖。

PS2:我正在尝试使用配色方案实现暗模式，并避免添加类或类似的东西，这是因为浏览器的一些默认样式，应用程序认为它是一个浅模式的网站，而不是(就像自动填充输入中的-内部-浅-暗颜色)

Answer 1

翻转媒体查询和根选择器的嵌套应该可以做到这一点。

:root {
  --bg: hotpink;
}

@media (min-width: 600px) {
  :root {
    --bg: blue;
  }
}


body {
  background-color: var(--bg);
}