直接用css变量--border-color配合js切换主题是最优方案，因无需操作dom、避免collapse下td/th继承失效，且全链路自动响应；需确保border三要素齐全并统一在table/th/td中引用该变量。
直接用 CSS 自定义属性（--border-color）配合 JavaScript 切换主题是最轻量、可维护性最强的方案，不需要反复操作 DOM 元素的 style.borderColor，也避免了 border-collapse: collapse 下单元格边框覆盖或继承失效的问题。
为什么不能只改 table.style.borderColor
因为 HTML 表格边框不是单一层级：即使你设置了 table 的 border-color，在 border-collapse: collapse 模式下，th 和 td 的边框会独立渲染，且它们的 border-color 不会自动继承 table 的颜色——CSS 中 border 是简写属性，不可继承；border-color 虽可继承，但前提是父元素显式设了该值，而 table 默认不传递给 td。
- 只改
table的style.borderColor，th/td边框颜色不变（尤其在 Bootstrap 或 reset.css 后） - 逐个遍历
th、td并设置style.borderColor会导致性能下降、样式污染、难以回退 - 用
inherit做 fallback 在部分旧浏览器中行为不一致（如 Safari 14 及更早）
用 --border-color 统一控制所有边框
把边框颜色抽成 CSS 变量，在 :root 或 body 上动态更新，所有用到该变量的地方自动响应。这是现代主题切换的标准做法。
- 确保 CSS 中所有带边框的表格元素都使用
border: 1px solid var(--border-color, #000)，包括table、th、td - 在
applyTheme函数里只需一行：document.documentElement.style.setProperty('--border-color', theme.borderColor) - 不需要给表格加
id，也不用查 DOM —— 只要 CSS 里用了这个变量，就全链路生效 - 如果已有
border-collapse: collapse，保持它；变量会同时作用于合并后的边框线
示例 CSS：
table, th, td {
border: 1px solid var(--border-color, #333);
border-collapse: collapse;
}
主题对象里必须包含 borderColor 字段
每个主题配置项要提供明确的 borderColor 值，且推荐用十六进制或 RGB，避免命名色（如 "black"）在不同 UA 下渲染差异。
- 错误写法：
black: { borderColor: 'black' }（命名色在深色模式下可能不可见） - 推荐写法：
black: { borderColor: '#ffffff' }、white: { borderColor: '#333333' } - 绿色主题别用
'green'，而是'#2e7d32'这类有足够对比度的实色 - 如果主题逻辑依赖 JS 动态生成颜色（比如从主色调推导），确保推导结果是有效 CSS 颜色字符串，不是
undefined或空值
border 三要素缺一不可，否则变量无效
很多人写了 var(--border-color) 却没效果，根本原因是没配齐 border-width 和 border-style —— CSS 变量只替换颜色值，不补全缺失属性。
- ❌ 错误：
border-color: var(--border-color);（没宽度、没样式，边框不显示） - ✅ 正确：
border: 1px solid var(--border-color, #000); - 如果需要单独控制某一边，用
border-top-color: var(--border-color);，但仍需确保该元素已有border-top-style和border-top-width - 检查是否被其他 CSS 规则覆盖：用浏览器开发者工具看 computed 样式里
border是否最终解析为有效值（如1px solid #fff）
真正容易被忽略的是：哪怕你把 --border-color 设置对了，只要任意一个地方的 border 定义漏了 style 或 width，整条边框就消失——它不报错，只是静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
