CSS没有light-dark()函数，需用var(--theme-color)配合@media(prefs-color-scheme)或class切换实现深色模式边框适配。
直接结论：CSS 没有 light-dark() 函数，这是常见误解；深色模式下边框颜色自动适配，必须靠 var(--theme-color) + 媒体查询或 class 切换实现。
为什么 light-dark() 不能用
它不是标准 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)
这是最轻量、零 JS、兼容性好（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，然后覆盖变量：html.dark-theme { --border-color: #475569; } - JS 切换时，操作的是
document.documentElement.classList.toggle("dark-theme") - 确保变量定义顺序：通用
:root在前，html.dark-theme在后，否则不会覆盖
border-color 本身不触发重绘，但变量更新会
很多人担心性能：改一个变量，会不会让全站边框重绘？不会。CSS 变量更新只触发“样式计算”，不强制 layout 或 paint，只要没改尺寸或布局属性，就非常轻量。
但要注意：
- 别在动画中高频修改
--border-color—— 边框颜色变化虽快，但叠加transition: border-color 0.2s才有平滑效果 - 如果用了
background-clip: border-box，且背景色也用变量，那两个变量同时变，仍只算一次重绘 - IE 完全不支持 CSS 变量，如需兼容，得用 JS 注入 style 标签或预编译两套 CSS
真正容易被忽略的是 fallback 值的写法：必须写成 var(--x, #ccc)，不能写成 var(--x) #ccc —— 后者是语法错误，整个声明会被丢弃。
