用 currentColor 和 CSS 自定义属性代替写死颜色值可提升灵活性与可维护性，支持主题切换和语义化；currentColor 动态继承文字颜色，适用于边框、图标等；CSS 变量集中管理语义化颜色，:root 中定义并用 var() 引用；二者结合可实现主题色自动同步与精细控制。
用 currentColor 和 CSS 自定义属性（变量）代替写死颜色值，能让样式更灵活、易维护，也天然支持主题切换和语义化表达。
currentColor：复用当前文字颜色
currentColor 是一个关键字，始终等于元素的 color 值。它不是固定色值，而是“活”的引用，会随文字颜色动态变化。
- 适合用于边框、图标、阴影等需要与文字颜色保持一致的场景
- 比如按钮的边框和文字同色：
border: 1px solid currentColor;，改color就自动同步 - SVG 内联图标中填色也可用：
fill: currentColor;，让图标自动响应文字变色 - 注意：它只继承计算后的
color值，不继承未设置时的浏览器默认值（如canvas的rgb(0, 0, 0)），建议显式设好基础color
CSS 变量：集中管理颜色语义
把颜色定义为自定义属性（如 --primary: #3b82f6;），再在各处引用，就能一处修改、全局生效。
- 推荐在
:root中统一声明，方便全站复用：:root { --text-primary: #1f2937; --bg-surface: #ffffff; } - 使用时用
var(--text-primary)，支持 fallback：color: var(--text-primary, #333); - 可结合媒体查询或 JS 动态切换主题：
document.documentElement.style.setProperty('--primary', '#ef4444'); - 避免直接用十六进制写死在组件里，比如不要写
background: #10b981;，而应写background: var(--success);
currentColor + 变量：组合出更高阶的控制力
两者不是互斥关系，而是互补。比如让图标颜色跟随主题主色，又保持与文字一致的明暗逻辑：
立即学习“前端免费学习笔记（深入）”；
- 先定义主题变量：
:root { --theme-color: var(--primary); } - 再让文字色基于该变量：
color: var(--theme-color); - 图标、边框等直接用
currentColor，就自然获得主题色且适配深色模式（只要color被正确更新） - 若需微调（如浅色背景上用深色文字，但边框要稍淡），可用
color-mix()（现代浏览器）或opacity辅助：border-color: color-mix(in srgb, currentColor 70%, transparent);
小技巧：给变量加语义前缀，别只叫 --red/--blue
颜色变量名应表达用途，而非物理色相：
- ✅ 推荐：
--button-primary-bg、--link-hover-underline、--card-border - ❌ 避免：
--red-500（除非你严格按 Tailwind 命名体系且全团队对齐） - 语义命名让换主题时更安全——改
--button-primary-bg，所有主按钮背景自动更新，无需逐个查找#3b82f6
