0

我有一个类似这样的 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和所有其他元素，但它不会触发与和全局变量prefers-color-scheme相关的样式，:root甚至其他一些地方。我怎么能做到这一点？

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

PS2：我正在尝试使用配色方案实现暗模式，并避免添加类或类似的东西，这是因为浏览器的一些默认样式被应用认为它是一个不是光模式的网站（比如 -internal - 自动填充输入时的亮暗颜色）

4

0 回答 0