currentcolor生效需三条件：svg内联、清空硬编码颜色、父元素有可计算color值；否则图标默认黑色，因内联fill/stroke属性优先级更高或外部svg无currentcolor解析入口。
直接用 currentColor 就能省掉 90% 的 SVG 颜色适配工作，但前提是 SVG 必须内联、清空所有硬编码颜色、且父元素有可计算的 color 值——三者缺一不可，否则图标永远是黑色。
为什么 fill="currentColor" 写了却还是黑的
不是语法问题，而是被更高优先级的规则静默覆盖：
-
fill="#000"或stroke="red"这类内联属性还留在<path></path>或<svg></svg>标签里，它们优先级高于 CSS，fill: currentColor根本没机会生效 - 用了
<img src="icon.svg">—— 外部 SVG 是独立文档，currentColor连解析入口都没有，一律回退为黑色 - 父容器没设
color，浏览器取默认值rgb(0, 0, 0)，图标“变了”，只是变回了默认黑 -
<svg></svg>根标签写了style="fill: inherit"，反而阻断了透传链
内联 SVG 中 fill="currentColor" 该写在哪一层
写在 <svg></svg> 根标签上最省事也最可靠：
-
<svg fill="currentColor" viewbox="0 0 16 16"><path d="..."></path></svg>—— 现代浏览器会自动向下透传给所有子图形，只要<path></path>没自己声明fill，就继承这个值 - 别写成每个
<path fill="currentColor"></path>—— 易漏、难维护，尤其含<circle></circle>、<rect></rect>多种图形时 - 如果图标带描边，必须同步加
stroke="currentColor"，否则填色变了，描边还是黑的
哪些地方必须显式写 currentColor 才生效
currentColor 不是魔法开关，它不会自动作用于所有颜色相关属性：
-
box-shadow: 0 1px 2px rgba(currentColor, 0.2)—— 透明度必须用rgba()显式控制，不能简写成box-shadow: 0 1px 2px currentColor -
text-shadow: 1px 1px 2px currentColor—— 这个可以直写，但常被忽略 -
background: linear-gradient(to right, currentColor, transparent)—— 渐变里也要手写，不会从color自动推导 -
::before { content: "•"; color: currentColor; }—— 伪元素默认不继承color，必须显式声明
深色模式下 currentColor 容易失效的关键点
它只读取当前已计算出的 color 值，不响应未激活的媒体查询：
- 如果父容器用的是静态类如
text-gray-700，深色模式下它不会自动切到浅色，图标也就卡在深灰 - 正确做法是用
class="text-gray-900 dark:text-gray-100"，或 CSS 变量：color: var(--text-color); --text-color: #1f2937; @media (prefers-color-scheme: dark) { --text-color: #f9fafb; } - 别指望
currentColor“穿透”两层以上去读远祖的color—— DevTools 的 Computed 面板里看color值是否是你预期的，才是唯一验证方式
真正麻烦的从来不是怎么写 currentColor，而是 SVG 源码里那一堆导出工具自动生成的 fill="#000" 和 style="fill:#333" —— 它们不报错、不警告，只默默让整个机制失效。清理这一步，比写十行 CSS 还重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
