深色模式样式不生效主因是优先级或结构问题。1. 确保媒体查询选择器与普通样式优先级一致，避免被覆盖；2. 避免JS内联样式强制设置，应通过classList切换主题类；3. @media需置于CSS顶层，不可非法嵌套；4. 检查浏览器支持及系统设置，利用开发者工具模拟测试。统一用class控制更可靠。
使用 @media (prefers-color-scheme: dark) 切换深色模式时样式不生效，通常不是语法问题，而是结构或优先级上的疏漏。下面列出常见原因和解决方法，帮助你快速定位并修复。
1. 检查 CSS 选择器优先级
深色模式的样式可能被后续普通样式覆盖。确保你的暗色规则具有足够高的优先级。
错误示例：
.light-mode {
background: white;
color: black;
}
@media (prefers-color-scheme: dark) {
body {
background: black;
color: white;
}
}
如果 .light-mode 是后来加载或有更高优先级（如类选择器 vs 元素选择器），它会覆盖媒体查询中的 body 样式。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 统一使用相同层级的选择器
- 或在暗色模式中增强选择器权重
@media (prefers-color-scheme: dark) {
body,
.light-mode {
background: #121212;
color: #fff;
}
}
2. 确保没有内联样式或 JS 强制覆盖
JavaScript 动态设置的 style 属性优先级高于外部样式表，包括媒体查询。
- 检查是否有代码类似
element.style.backgroundColor = "white" - 避免在 JS 中直接操作颜色，应通过切换 class 控制
// 用 class 控制主题
document.body.classList.toggle('dark-theme', window.matchMedia('(prefers-color-scheme: dark)').matches);
3. 验证媒体查询语法与位置
@media 规则必须写在 CSS 文件中正确位置，不能嵌套在其他规则内（除非使用 CSS-in-JS 或预处理器支持）。
.container {
color: black;
@media (prefers-color-scheme: dark) {
color: white; /* 可能不生效 */
}
}
应改为顶层书写：
.container {
color: black;
}
@media (prefers-color-scheme: dark) {
.container {
color: white;
}
}
4. 浏览器兼容性与调试方法
虽然现代浏览器基本都支持 prefers-color-scheme，但仍需确认是否启用或被屏蔽。
- 打开开发者工具，在“渲染”面板中模拟强制深色模式
- 手动测试媒体查询：
window.matchMedia('(prefers-color-scheme: dark)').matches是否返回true - 系统层面确认已开启深色模式（Windows/macOS/iOS/Android 设置）
基本上就这些。多数情况下是优先级或结构问题导致样式“看似不生效”，实际是被覆盖了。理清层级关系，统一用 class 控制主题更稳定。
