先说结论：CSS 中并不存在所谓的 light-dark() 函数——这是许多开发者容易踩到的常见误区。要实现深色模式下边框颜色的自动适配，正确的方法是使用 var(--theme-color) 配合媒体查询或 class 切换。
直接上结论：CSS 没有 light-dark() 函数，这是个普遍误解；深色模式下边框颜色自动适配，必须依赖 var(--theme-color) + 媒体查询或 class 切换来实现。
为什么 light-dark() 不能用于 CSS
这不是标准的 CSS 函数，截至 2026 年 4 月，主流浏览器均未提供支持。如果你在 DevTools 中输入 border-color: light-dark(blue, purple);，浏览器会直接报错或忽略该声明——它根本不识别这个语法。
开发者容易踩坑的常见场景包括：
- 照搬某些实验性文档或错误博客中的写法，误以为这是“新特性”
- 与 SVG 中的
light-dark()（仅适用于部分 SVG 属性）混淆 - 误将 Tailwind 的
dark:border-purple-400当作原生 CSS 能力
正确做法：用 :root 变量 + @media (prefers-color-scheme)
这是目前最轻量、零 JavaScript、兼容性最佳的方案（Chrome 87+、Firefox 96+、Safari 15.4+ 均已支持）。
具体操作建议如下：
- 在
:root中先定义默认主题色：--border-color: #333; - 通过
@media (prefers-color-scheme: dark)覆盖变量值：--border-color: #aaa; - 所有边框统一使用
border-color: var(--border-color);，务必不要遗漏var()包裹 - 添加 fallback 值防止崩溃：
border-color: var(--border-color, #64748b);
下面是一个简单示例：
/* style.css */
:root {
--border-color: #64748b;
}
@media (prefers-color-scheme: dark) {
:root {
--border-color: #94a3b8;
}
}
.card, .input, .btn {
border: 1px solid var(--border-color, #94a3b8);
}
需要手动切换主题时，改用 class 控制
如果用户通过点击按钮手动切换深色/浅色模式（而非依赖系统偏好），则 @media 不再适用，必须依靠 class 来控制。
关键要点：
- 不要写
.dark-mode :root { ... }——:root是全局根元素，无法被后代 class 影响 - 应直接在
html或body上添加 class，然后通过 class 覆盖变量：html.dark-theme { --border-color: #475569; } - JS 切换时，操作
document.documentElement.classList.toggle("dark-theme") - 确保变量定义顺序：通用
:root在前，html.dark-theme在后，否则不会被覆盖
border-color 本身不触发重绘，但变量更新会
很多人担心性能问题：修改一个变量，会不会导致全站边框重新绘制？实际上不会。CSS 变量更新仅触发“样式计算”，不会强制布局或重绘（paint），只要不涉及尺寸或布局属性的变更，性能开销非常轻量。
但有几个细节仍需要留意：
- 避免在动画中高频修改
--border-color—— 边框颜色变化本身很快，但配合transition: border-color 0.2s才能获得平滑过渡效果 - 如果使用了
background-clip: border-box，且背景色也通过变量控制，两个变量同时变化时仍只算一次重绘，无需担心 - IE 完全不支持 CSS 变量，若要兼容，需通过 JavaScript 注入 style 标签或预编译两套 CSS 文件
最后提醒一个容易被忽略的细节：fallback 值的写法必须为 var(--x, #ccc)，不能写成 var(--x) #ccc —— 后者是语法错误，会导致整个声明被直接丢弃。
