嘿，我来帮你排查一下这个问题～ 从你描述的情况和代码来看，大概率是对color-scheme的作用有误解，或者是一些容易忽略的小细节导致样式没生效，咱们一步步来分析：

首先，先明确color-scheme的真实作用：它不是用来直接控制页面自定义样式的切换，而是告诉浏览器「我的页面支持深色/浅色模式」，让浏览器的默认UI元素（比如滚动条、输入框、下拉选单这些原生控件）自动适配对应的模式。比如你设置color-scheme: dark，浏览器的滚动条就会变成深色模式下的样式，但不会直接改变你写的body背景色和文字色。

接下来看你的代码，可能的问题点有这几个：

1. CSS变量未定义，导致样式无效 #

你在媒体查询里用了var(--theme-color-extreme-light)和var(--theme-color-extreme-dark)，但你的:root里只写了color-scheme，没有声明这些变量！如果变量没定义，浏览器会用默认值 fallback，看起来就像样式没生效。你需要先在:root里把变量补上：

:root {
  --theme-color-extreme-light: #ffffff; /* 可根据你的需求调整具体颜色值 */
  --theme-color-extreme-dark: #1a1a1a; /* 可根据你的需求调整具体颜色值 */
  color-scheme: dark;
}

2. 混淆了color-scheme和强制颜色模式的逻辑 #

如果你期望color-scheme: dark能强制页面始终显示深色模式，那这个属性做不到。它只是给浏览器一个提示，页面的自定义样式还是要靠prefers-color-scheme媒体查询来响应系统的颜色偏好设置。如果想强制页面固定深色，直接写body的样式就行，不需要媒体查询：

body {
  background-color: var(--theme-color-extreme-dark);
  color: var(--theme-color-extreme-light);
}

3. 媒体查询未触发，可能是浏览器设置问题 #

如果变量已经定义了，但样式还是没生效，可以先写个简单的测试代码验证媒体查询是否正常工作：

@media (prefers-color-scheme: light) {
  body {
    background: lightcoral !important;
  }
}
@media (prefers-color-scheme: dark) {
  body {
    background: darkslateblue !important;
  }
}

然后切换你系统的深色/浅色模式（比如Windows的个性化设置、Mac的显示设置），看看页面背景色会不会变化。如果没变化，可能是你的浏览器设置了强制颜色模式，忽略了系统偏好——比如Chrome里可以在相关设置里检查是否开启了强制深色，关掉它再试试。

4. 其他样式覆盖了你的规则 #

最后检查一下有没有其他优先级更高的CSS规则覆盖了body的样式，比如行内样式、带!important的样式，或者更具体的选择器（比如.container body这种）。可以用浏览器的开发者工具（F12）查看body元素的样式面板，看看你的媒体查询样式是不是被划掉了，旁边会提示被哪个规则覆盖。

总结一下：color-scheme是管浏览器原生UI的，页面自定义的深色/浅色样式还是要靠媒体查询+CSS变量来实现，确保变量先声明，媒体查询能正常响应系统偏好，同时没有样式冲突，应该就能解决问题啦～

备注：内容来源于stack exchange，提问作者yuanzui_cf