必须将表格变量统一定义在 :root 下，如 --table-bg，并显式用 var() 引用所有样式；切换主题需批量 setproperty、持久化 localstorage 且用 data-theme 属性触发渲染。
必须在 :root 中定义表格专用变量
只给 table 或 .table-theme 里声明 --table-bg 没用——JavaScript 调用 setProperty 改不了局部作用域里的变量，子元素也读不到。真正生效的写法是把所有表格相关变量统一挂到 :root 下：
:root { --table-bg: #ffffff; --table-border: #e2e8f0; --table-header-bg: #f1f5f9; --table-row-hover: #f8fafc; --table-text: #1e293b; }
变量名加前缀（如 --table-）能避免和按钮、导航等其他模块的 --primary-color 冲突。别用命名色（如 blue），JS 读取不到具体数值，后续做深色模式计算会失败。
所有表格样式都得显式引用 var()
改完 :root 变量只是第一步。如果 th 还写着 background-color: #f1f5f9;，换主题时它纹丝不动。必须逐处替换，包括容易被忽略的地方：
-
table、th、td的background-color和color -
th::after或td::before里的background（如果有装饰性伪元素） -
tr:hover的背景色，别漏掉tbody tr:hover这种更具体的选择器 -
input[type="checkbox"]在表格单元格内时，其accent-color也要用var(--table-bg)控制 - 内联 SVG 图标（比如表格操作列里的
<svg><path fill="currentColor"></path></svg>）需补上fill: var(--table-text);
用 setProperty 批量更新，别碰 cssText
切换主题时，直接改 document.documentElement.style.cssText 会清空所有已有内联样式，包括框架注入的 class 或第三方组件动态加的 style。正确做法是封装一个批量设置函数：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
function updateTableTheme(theme) {
const root = document.documentElement.style;
Object.entries(theme).forEach(([prop, value]) => {
root.setProperty(prop, value);
});
}
// 调用
updateTableTheme({
'--table-bg': '#0f172a',
'--table-border': '#334155',
'--table-header-bg': '#1e293b',
'--table-row-hover': '#334155',
'--table-text': '#e2e8f0'
});
注意：传入的 key 必须带 -- 前缀，且大小写严格匹配 CSS 变量名。如果变量名拼错（比如写成 --table_bk），浏览器静默忽略，不报错也不生效。
localStorage + data-theme 属性才是稳定方案
单纯靠 JS 改变量值，刷新页面就回退。必须配合 localStorage 持久化，并用 data-theme 属性触发初始渲染，否则首屏会闪一下白底黑字再变暗：
在 里放内联脚本：
const saved = localStorage.getItem('table-theme') || 'light';
document.documentElement.setAttribute('data-theme', saved);
// 然后立即调用 updateTableTheme() 加载对应变量值
用户点击切换时，除了调用 updateTableTheme()，还得同步更新 localStorage 和 data-theme 属性。别用 class="dark" 去控制，html.dark 无法覆盖 :root 变量，只有 html[data-theme="dark"] 这种高权重选择器才能确保变量重写生效。
表格主题不是独立系统，它依赖全局变量粒度设计。漏掉一个 var() 引用、错一次 setProperty 参数、或晚半秒设 data-theme，都会导致部分单元格颜色卡死在旧值上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
