在移动端如何用CSS媒体查询实现深浅色模式图标自动反色切换？-css教程-PHP中文网

直接用 prefers-color-scheme 切换 SVG 图标颜色常失效，因硬编码 fill 值绕过 CSS 变量，且 iOS Safari 15.4 前存在初始判断 bug；须统一用 currentColor + :root 变量控制，并注意移动端 color-scheme 声明、stroke 同步、避免 opacity/transform 中断继承，以及 JS 主动管理 data-theme 覆盖媒体查询。

在移动端如何用css媒体查询实现深浅色模式图标自动反色切换？

为什么直接用 `prefers-color-scheme` 切换 SVG 图标颜色经常失效

因为 SVG 内联图标（）默认继承父元素的 color，但很多图标的 fill 是硬编码值（如 fill="#333"），完全绕过 CSS 变量和媒体查询。更麻烦的是，iOS Safari 15.4 之前对 prefers-color-scheme 的初始判断有 bug，页面首次加载时可能取错值，导致图标颜色“卡”在错误状态。

SVG 图标必须用 `currentColor` + `:root` 变量联动

把所有图标颜色控制收口到 color 属性，再通过 currentColor 向内传递，是唯一可控路径。关键不是改 SVG，而是统一入口：

:root 中定义 --icon-color: #333（浅色默认）
在 @media (prefers-color-scheme: dark) 块中重设 --icon-color: #f0f0f0，且该块必须放在所有默认样式之后
所有图标父容器（比如 .icon-btn、nav a）显式设置 color: var(--icon-color)
SVG 内部只写 fill="currentColor"，不写任何具体颜色或 fill="var(--icon-color)"（后者在 SVG 中无效）

移动端需额外处理的三个“隐形坑”

原生控件和系统渲染行为在 iOS/Android 上差异明显，光靠媒体查询不够：

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

给 :root 加 color-scheme: light dark，否则 iOS 上的或开关滑块不会自动反色
SVG 中若用了 stroke，也要同步设为 currentColor，否则描边颜色会卡死
避免对图标容器使用 opacity 或 transform，它们会切断 currentColor 继承链，尤其在 iOS Safari 中表现不稳定

手动切换按钮点击后图标不更新？检查 class 是否作用于 `html` 元素

用户点按钮切深色时，如果只给 body 加 .dark 类，SVG 图标依然读取 body 的 color，但媒体查询已失效——此时你实际需要的是 JS 主动控制变量优先级。正确做法是：

初始化时读取 localStorage.getItem('theme')，并立即给 document.documentElement 添加 data-theme="dark"
CSS 中写两条规则：[data-theme="dark"] { --icon-color: #f0f0f0; } 和 @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --icon-color: #f0f0f0; } }
这样既保留系统默认，又允许用户覆盖，且图标响应零延迟

真正容易被忽略的，是 SVG 外层容器的 color 值是否被其他选择器意外覆盖——比如一个全局 a { color: inherit; } 在深色模式下可能让图标变成链接默认蓝，而不是你定义的 --icon-color。