直接用 prefers-color-scheme 切换 SVG 图标颜色常失效，因硬编码 fill 值绕过 CSS 变量，且 iOS Safari 15.4 前存在初始判断 bug；须统一用 currentColor + :root 变量控制，并注意移动端 color-scheme 声明、stroke 同步、避免 opacity/transform 中断继承，以及 JS 主动管理 data-theme 覆盖媒体查询。
为什么直接用 prefers-color-scheme 切换 SVG 图标颜色经常失效
因为 SVG 内联图标（<svg><path fill="currentColor"></path></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 上差异明显，光靠媒体查询不够：
- 给
:root加color-scheme: light dark，否则 iOS 上的<input type="range">或开关滑块不会自动反色 - 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; } } - 这样既保留系统默认，又允许用户覆盖，且图标响应零延迟
color 值是否被其他选择器意外覆盖——比如一个全局 a { color: inherit; } 在深色模式下可能让图标变成链接默认蓝，而不是你定义的 --icon-color。 
