深色模式下css颜色不生效主因是样式优先级覆盖和变量管理不当，需检查@media规则位置、使用css自定义属性并提供fallback、监听prefers-color-scheme变化、妥善处理svg与图片适配。
深色模式下 CSS 颜色不生效？先检查 @media (prefers-color-scheme) 是否被覆盖
很多颜色在深色模式下“看起来没变”，不是媒体查询写错了，而是后续 CSS 规则权重更高，把颜色又覆盖回去了。浏览器按顺序解析样式，后面定义的 color、background-color 会直接压掉前面媒体查询里的设置。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具选中元素，看「Computed」面板里
color最终值从哪条规则来，重点排查非媒体查询区域的全局类（比如.text-default或重置样式表） - 媒体查询块尽量靠近组件样式末尾，或加
!important仅用于调试定位（上线前应改用提高选择器特异性的方式） - 避免在
:root中一次性定义所有颜色变量后，又在普通样式里硬编码颜色值——这会让媒体查询失去控制力
用 CSS 自定义属性（--color-text）统一管理深浅色，但别漏掉 fallback
只写 color: var(--color-text); 而不提供默认值，遇到不支持自定义属性的老浏览器或 js 未加载时，文字可能变成透明或继承不可控颜色。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终为每个
var()提供 fallback，例如：color: #333; color: var(--color-text, #333); - 在
:root里按模式分别定义变量，而不是在媒体查询里反复重写整套变量集 - 注意变量作用域：嵌套组件若自己定义了同名
--color-text，会屏蔽外层媒体查询的值——这时要确认是否真需要局部覆盖
prefers-color-scheme 在 safari 和旧版 chrome 中的行为差异
Safari（尤其是 ios 13–15）对 @media (prefers-color-scheme: dark) 的触发更敏感，有时系统刚切深色模式，页面需刷新才生效；而 Chrome 80+ 通常能实时响应，但若页面用了 document.write 或内联 style 标签，可能跳过媒体查询重算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖首次加载时的
matchMedia查询结果做一次性渲染，监听变化：matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...) - 服务端渲染（SSR）场景下，无法读取客户端偏好，必须留出 JS 激活逻辑，否则首屏颜色错乱
- 测试时禁用系统自动切换（固定设为 dark/light），避免因时间/光照传感器干扰判断
图片和 SVG 图标在深色模式下的对比度与语义问题
纯白背景上的黑色 SVG 图标，在深色模式下直接消失；而 PNG 图片无法通过 CSS 改变内部颜色，只能靠 Filter: invert() 或换图源，但后者容易导致布局抖动或加载延迟。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- SVG 尽量用内联方式写入 HTML，然后用
fill: var(--icon-color);控制颜色，配合媒体查询更新变量 - 图标字体（如 Font Awesome）需确认其
font-family是否受color影响——有些图标是伪元素 + content，得单独设::before { color: var(--icon-color); } - 图片用
picture+source media切换 srcset，但注意media属性只支持媒体查询字符串，不能写 JS 表达式
深色模式适配真正卡住人的地方，往往不是怎么写媒体查询，而是变量作用域、样式优先级、以及图片/SVG 这些“非纯 CSS”资源的协同处理——它们各自有一套规则，混在一起就容易漏掉一两个环节。