currentcolor不是无缝主题切换的隐藏利器，它仅让边框、图标、阴影等被动跟随当前元素自身计算出的color值，不参与主题决策、不管理多色系、不响应深浅模式切换。
currentColor 不是“无缝主题切换”的隐藏利器，它根本不能独立实现主题切换——它只是让边框、图标、阴影等局部装饰色被动跟随当前元素的 color 计算值，不参与主题决策、不管理多色系、不响应深浅模式切换逻辑。
currentColor 读的是谁的 color？不是父级，也不是变量
它只取当前元素自身最终计算出的 color 值：可能是显式写的 color: #3b82f6，也可能是从父级继承来的，甚至就是浏览器默认的 black。它不会“穿透”到祖先查 --primary，也不能读取 data-theme 属性或媒体查询结果。
- 写
.btn { color: var(--text-primary); border-color: currentColor; }能生效，是因为var(--text-primary)计算后给了color一个真实值，currentColor才有东西可读 - 如果
.btn没设color，又没继承到有效值，那它的currentColor就是rgb(0, 0, 0)，图标和边框全变黑 - 伪元素如
::before默认不继承color，所以::before { fill: currentColor; }会失效，必须先加color: inherit;
哪些地方必须手动写 currentColor 才能生效？
它不会自动扩散到所有颜色属性，每个支持 <color></color> 的地方都得显式声明：
-
box-shadow: 0 1px 2px rgba(currentColor, 0.2)—— 不能简写成box-shadow: 0 1px 2px currentColor，透明度必须用rgba() -
text-shadow: 1px 1px 2px currentColor—— 这个可以直写，但常被忽略 -
background: linear-gradient(to right, currentColor, transparent)—— 渐变里也要手写，不会自动推导 -
svg { fill: currentColor; }—— 外部<img src="icon.svg">完全不生效，只能用于内联 SVG
为什么换肤时 currentColor 总“卡住”不动？
不是它坏了，而是你改了主题变量却没触发目标元素的 color 重算：
- 用 JS 切换
document.documentElement.style.setProperty('--theme-color', 'blue')，但没同步更新按钮的color（比如忘了在:root或组件上设color: var(--theme-color)） - IE11 下
border: 1px solid currentColor整条失效，必须拆成border-width、border-style、border-color单独写 - 旧版 Safari（≤15.3）对
text-decoration-color: currentColor支持差，需 fallback：text-decoration-color: #666; text-decoration-color: currentColor; - 动画中给
color加transition，border-color和box-shadow不会平滑过渡，只会在重绘完成时“跳变”
真正容易被忽略的点是：你指望 currentColor 做主题中枢，但它连“通知下游更新”这个基本能力都没有——它只是一次性快照。主题切换的可靠性，永远取决于 color 是否被正确设置、是否继承到位、是否在关键节点显式写出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
