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;
}
/ 主题容器 —— 切换这里就能批量变色 /
.theme-light {
color: #333; / 深灰文字 → 链接也深灰 /
}
.theme-dark {
color: #e0e0e0; / 浅灰文字 → 链接也浅灰 /
}
/ 悬停增强可读性（可选） /
a:hover {
opacity: 0.8; / 或用 filter: brightness(1.2) /
}
这样，只要给 切换 class，所有 就会立刻响应，无需重复写 color 规则。
立即学习“前端免费学习笔记（深入）”；
进阶技巧：兼顾 visited 和 focus 状态
:visited 不能读取真实颜色，但可以安全地设为 currentColor（浏览器允许设置，只是可能不渲染为预期值）。更稳妥的做法是统一处理：
a,
a:visited,
a:focus,
a:hover {
color: currentColor;
}
/ 单独强化 focus 可见性（无障碍友好） /
a:focus {
outline: 2px solid currentColor;
outline-offset: 2px;
}
如果需要 :visited 显示不同色（如淡紫色），建议用 CSS 自定义属性配合 JS 控制，避免依赖 :visited 的不可靠行为。
与 CSS 自定义属性协同使用（兼容旧浏览器或复杂主题）
若项目需支持不支持 currentColor 的极老环境（基本已无必要），或主题逻辑较复杂（如多级配色），可结合 --link-color 变量：
:root {
--link-color: var(--text-color, #0066cc);
}
a {
color: var(--link-color);
}
.theme-high-contrast {
--text-color: #000;
--link-color: #d32f2f; / 高对比下链接用红色 /
}
但注意：这种写法需手动维护变量同步；而纯 currentColor 方案更简洁、零维护、天然一致。
本质上，currentColor 不是“黑科技”，而是对 CSS 继承机制的自然利用。主题适配的关键不在花式变量，而在让链接真正成为文本的一部分——它本就该和文字同色。
