fill: currentColor 在移动端不生效的根本原因并非平台限制，而是 SVG 加载方式错误（如用 引入）、父容器 color 继承链断裂、或 SVG 内部存在高优先级的内联 fill 值；必须使用内联 SVG 并确保所有子元素（path/circle等）均设为 fill="currentColor"。
为什么 fill: currentColor 在移动端不生效
核心问题不是移动端特有，而是 SVG 加载方式或继承链断裂。iOS Safari 和 Android Chrome 都支持 currentColor，但常见失效场景包括：
• 用 
currentColor 完全不可见
• 父容器未显式设置 color，比如只靠 body { color: #333 }，而中间某层用了 color: unset 或 inherit 导致继承中断
• SVG 内部仍保留 fill="#000" 这类内联属性，它优先级高于 CSS 中的 fill: currentColor
必须用内联 SVG 才能响应主题切换
只有把 SVG 代码直接写进 HTML，才能让子元素（如 fill: currentColor。
• 不要复制粘贴后只改 根标签的 fill，必须逐个检查内部图形元素：fill="currentColor"
• 若图标含描边，同样需设 stroke="currentColor"，且确认 stroke-width 不为 0 或过大（常见于小尺寸图标）
• 使用 时，fill="currentColor"，且 的父容器必须设 color
深色模式下颜色没变？检查这三处
移动端系统级深色模式通过 @media (prefers-color-scheme: dark) 触发，但图标是否响应取决于 CSS 作用域：
• 父容器的 color 必须由变量或媒体查询动态控制，例如：.nav-item { color: var(--text-primary); } @media (prefers-color-scheme: dark) { :root { --text-primary: #fff; } }
• 避免在 Tailwind 中写死 text-gray-700 —— 改用 text-gray-900 dark:text-gray-100，否则 currentColor 继承的是亮色值
• 检查是否启用了系统字体缩放或辅助功能设置（如“增大文字”），某些 iOS 版本会重置部分 CSS 计算值，导致 currentColor 回退到初始 black
兼容旧版 WebView 或调试困难时的兜底方案
Android 4.4+ WebView 和 iOS 9+ 均支持 currentColor，但调试时容易误判：
• 在 DevTools 中选中 Computed 面板里的 fill 值是否为 currentColor；如果不是，说明被更高优先级样式覆盖或内联属性未清除
• 不要用 !important 强行覆盖内联 fill，应直接删掉 SVG 源码中的 fill="..." 属性
• 对于必须兼容 IE11 的混合项目，放弃 CSS 变量，只用 fill: currentColor 并配合 class 切换（如 .theme-light { color: #333; } / .theme-dark { color: #fff; }）
• 最容易被忽略的一点：SVG 的 viewBox 值若缺失或错误，部分 Android WebView 会拒绝解析内部样式，导致 fill 回退为 black
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
