就我所知，color-scheme属性只是告诉浏览器你的元素在哪种模式下可以以一种舒适的方式呈现。根据这一点，你允许浏览器覆盖你的颜色。但它不能保证这会发生。你可以阅读更多关于color-scheme here的内容
但是，您可以根据浏览器设置 * 和 * 自动设置方案，从而允许用户切换模式：
1.使用Javascript检测当前模式
1.这取决于为元素（或主体）设置类
1.只设计您自己的类的样式，不要依赖@media (prefers-color-scheme: ...)
不知道这是不是最好的诚实方式，但我就是这么做的。
为了检测用户的模式，你可以使用window.matchMedia()，如果媒体查询匹配，它是暗模式，否则它是亮模式。

const useDark = window.matchMedia("(prefers-color-scheme: dark)");

然后，您只需为所需元素的初始状态设置类

<br>

if (useDark.matches) {
  box.classList.add('color-scheme-dark');
}
else {
  box.classList.add('color-scheme-light');
}

为了在亮和暗模式之间手动切换，请在click事件

changeColorSchemeButton.addEventListener('click', function() {
  box.classList.toggle('color-scheme-dark');
  box.classList.toggle('color-scheme-light');
});

中切换这些类
完整示例如下
第一个