currentColor 是最轻量可靠的链接主题色适配方案，它天然继承父级 color 值，无需 JS 或 CSS 变量管理，支持所有颜色属性及伪类，一行代码即可实现全局响应式变色。
用 currentColor 让链接颜色自动跟随主题色，是最轻量、最可靠的方式——它不依赖 JavaScript，不增加 CSS 变量管理负担，天然继承父级的 color 值。
核心原理：currentColor 就是“当前文字色”
currentColor 是一个 CSS 关键字，代表元素自身或其继承链上最近定义的 color 值。只要主题切换时只改根或容器的 color，所有用 currentColor 的链接就会自动变色。
- 它不是变量，无需声明，天生支持继承和层叠
- 支持所有接受颜色值的属性：`color`、`border-color`、`outline-color`、`fill`（SVG）、`stroke` 等
- 在伪类（如
:hover、:visited）中也能正常工作，但需注意 浏览器 对:visited的隐私限制（部分颜色可能被强制降级）
基础写法：一行搞定默认与悬停状态
直接将链接的 color 设为 currentColor，再通过父容器控制主题色：
/* 全局默认链接样式 */ a {color: currentColor; text-decoration: underline;} <p>/<em> 主题容器 —— 切换这里就能批量变色 </em>/ .theme-light {color: #333; /<em> 深灰文字 → 链接也深灰 </em>/} .theme-dark {color: #e0e0e0; /<em> 浅灰文字 → 链接也浅灰 </em>/}</p><p>/<em> 悬停增强可读性（可选）</em>/ a:hover {opacity: 0.8; /<em> 或用 filter: brightness(1.2) </em>/ }这样，只要给 切换 class，所有 <a></a> 就会立刻响应，无需重复写 color 规则。
立即学习 “ 前端免费学习笔记（深入）”；
进阶技巧：兼顾 visited 和 focus 状态
:visited 不能读取真实颜色，但可以安全地设为 currentColor（浏览器允许设置，只是可能不渲染为预期值）。更稳妥的做法是统一处理：
a, a:visited, a:focus, a:hover {color: currentColor;} <p>/<em> 单独强化 focus 可见性（无障碍友好）</em>/ a:focus {outline: 2px solid currentColor; outline-offset: 2px;}如果需要 :visited 显示不同色（如淡紫色），建议用 CSS 自定义属性配合 JS 控制，避免依赖 :visited 的不可靠行为。
与 CSS 自定义属性协同使用（兼容旧浏览器或复杂主题）
若项目需支持不支持 currentColor 的极老环境（基本已无必要），或主题逻辑较复杂（如多级配色），可结合 --link-color 变量：
:root {--link-color: var(--text-color, #0066cc); } <p>a {color: var(--link-color); }</p><p>.theme-high-contrast {--text-color: #000; --link-color: #d32f2f; /<em> 高对比下链接用红色 </em>/}但注意：这种写法需手动维护变量同步；而纯 currentColor 方案更简洁、零维护、天然一致。
本质上，currentColor 不是“黑科技”，而是对 CSS 继承机制的自然利用。主题适配的关键不在花式变量，而在让链接真正成为文本的一部分——它本就该和文字同色。
