如何阻止CSS color-scheme规则作用于指定元素？

color-scheme属性主要是告诉浏览器为元素及子元素应用对应配色模式的默认用户代理样式，但它不会直接强制覆盖文字颜色——根元素设dark模式后，文字会继承系统变量CanvasText（深色模式下为白色），所以你之前设置color-scheme: normal或only light没用，因为没改变这个继承的颜色值。

要让<h1>始终显示黑色文字，直接给它显式设置color属性即可，这是最直接有效的方式：

修改后的CSS代码 #

:root {
  color-scheme: dark;
}

body {
  display: grid;
  font-size: 1.25rem;
  place-items: center;
}

button {
  font-size: 1.25rem;
  line-height: 1.35;
  width: 300px;
}

.only-light {
  /* 强制文字为黑色 */
  color: black;
  /* 如果需要背景也保持浅色，可添加下面这行 */
  /* background-color: white; */
}

.light {
  color-scheme: light;
}

完整代码示例 #

HTML #

<h1 class="only-light">Heading 1</h1>

<button>
  Toggle Color
</button>

JavaScript #

let root = document.querySelector(":root");
let button = document.querySelector("button");

button.addEventListener("click", () => {
  event.preventDefault();
  root.classList.toggle("light");
});

这样不管根元素切换dark还是light模式，<h1>的文字都会保持黑色。如果还需要让该元素的背景也始终是浅色，就加上background-color: white;即可。

内容的提问来源于stack exchange，提问作者Nathan Bruet