为何基于media query的暗色模式失效？按钮背景变黑但@media未响应color-scheme

核心原因 #

• color-scheme: dark 是向浏览器声明「当前页面适配深色配色方案」，浏览器会自动将按钮这类默认控件的样式切换为深色（这就是你看到按钮背景变黑的原因），但这个属性不会修改用户系统的配色偏好设置。
• @media (prefers-color-scheme) 是用来检测用户操作系统级的深色/浅色模式设置，它的触发条件完全由系统决定，和你在页面里设置的color-scheme没有关联。

你当前的代码里，不管系统是深色还是浅色模式，都强制给<html>设置了color-scheme: dark，所以按钮呈现深色样式，但媒体查询的触发还是看系统设置，不会因为页面的color-scheme改变而触发。

解决思路 #

如果想让页面的配色和你设置的color-scheme联动（比如点击按钮切换），可以用类名/属性配合JavaScript来实现，而不是依赖系统的媒体查询：

修改后的CSS代码

/* 声明页面支持两种配色模式 */
html {
  color-scheme: light dark;
}

/* 深色模式样式 */
html[data-theme="dark"] {
  color-scheme: dark;
}
html[data-theme="dark"] body {
  background: grey;
}

/* 浅色模式样式 */
html[data-theme="light"] {
  color-scheme: light;
}
html[data-theme="light"] body {
  background: yellow;
}

配套JavaScript代码

const toggleBtn = document.querySelector('button');
toggleBtn.addEventListener('click', () => {
  const htmlEl = document.documentElement;
  const currentTheme = htmlEl.getAttribute('data-theme');
  // 切换主题
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  htmlEl.setAttribute('data-theme', newTheme);
});

这样点击按钮时，会切换<html>的data-theme属性，同时同步修改color-scheme和页面背景色，按钮的默认样式也会跟着color-scheme自动切换。

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