currentcolor 是 css 关键字，代表当前元素的 color 计算值，通过继承使图标颜色随父级文本色动态变化，需父元素显式设置 color 且 svg/字体图标未硬编码颜色。
currentColor 是什么，为什么它能动态改图标颜色
currentColor 不是一个函数，也不是变量，它是 CSS 中一个关键字值，代表当前元素的 color 计算值。它的核心能力是“继承”——子元素只要把图标颜色设为 currentColor，就会自动跟随父级文本色变化，无需 JS 或重复写死颜色值。
常见错误是把它当普通颜色用，比如直接写 color: currentColor 在根元素上——这没意义，因为根元素没有上级 color 可继承（除非你显式设置了 color）。真正起效场景是：父容器设了 color，子元素的 SVG fill 或字体图标 color 设为 currentColor。
- 父元素必须显式声明
color（哪怕只是color: #333），否则子元素继承的是初始值black - SVG 内联时，
fill和stroke都支持currentColor；外部 SVG sprite 或<use></use>引用时，需确保 SVG 元素本身没硬编码fill属性（否则会覆盖继承） - 字体图标（如 Font Awesome）默认用
color控制图标色，所以只需确保图标元素自身没写死color，且父级有color声明即可
SVG 图标中怎么正确用 currentColor
关键在 SVG 的写法和引用方式。内联 SVG 最可控，外部引用容易因样式隔离失效。
- 内联 SVG：直接在 HTML 里写
<svg><path fill="currentColor" ...></path></svg>，此时fill会响应父级color - 外部 SVG +
<img>：不支持currentColor，因为 img 是替换元素，无法穿透样式 - 外部 SVG +
<use></use>：需确保原始 SVG 文件中的<path></path>没带fill属性（删掉或改成fill="none"），否则浏览器不会继承 - 如果用 CSS 设置 SVG 元素的
fill，记得加!important吗？不用。只要没内联fill，CSS 中写svg path { fill: currentColor }就足够
示例：
<div style="color: #007bff"> <svg width="16" height="16"><path d="M8 0l-1 1v14l1-1z" fill="currentColor"></path></svg> </div>点击切换父级
color，图标立刻变色。
配合伪元素和字体图标时的坑
伪元素（::before/::after）和字体图标依赖 color 属性，但容易被其他规则干扰。
- 用伪元素插入字体图标（如
content: "\f007"）时，必须保证该伪元素的color没被重置（比如某些重置 CSS 会设color: inherit，但没父级 color 就无效） - 若父容器用了
color: transparent，图标也会变透明——这不是 bug，是按规范继承 - 使用
@font-face自定义图标字体时，确保字体文件本身不强制绑定颜色（字体图标的颜色纯由文本color决定） - Flex 或 Grid 容器中，如果图标被包裹在
span里，而该span被设了color: initial，继承链就断了
最稳妥做法：给图标外层加一个明确带 color 的 wrapper，图标元素只负责渲染，不干预颜色。
currentColor 在 dark mode 下是否自动适配
不自动。它只继承当前计算出的 color 值，不管这个值是怎么来的。
- 如果你用
@media (prefers-color-scheme: dark)切换根元素:root { color: white }，那所有currentColor图标都会跟着变白 - 但如果只是改了背景色、没动
color，图标颜色完全不会变 - 更常见问题是：dark mode 下文本色设成了浅灰（如
#e0e0e0），但图标fill因为 SVG 里写了fill="#333"而没更新——这时得删掉内联 fill，改用currentColor
别指望 currentColor 懂语义，它只懂“此刻父级 color 是多少”。复杂主题切换逻辑，仍要靠 CSS 变量或 JS 控制根色值。
currentColor 的威力在于极简，代价是它完全不感知上下文。一旦继承链里某一级漏设 color，或者 SVG 内联了颜色，效果就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
