不能直接用class="dark"切换主题，因其污染HTML语义、导致样式维护成本指数级上升、且无法与prefers-color-scheme联动或参与CSS函数计算；应采用:root[data-theme="dark"]统一挂载变量，通过dataset.theme控制并确保所有var()带fallback。
为什么不能用 class 切换主题
直接给 html 或 body 加 class="dark" 再写 .dark .btn { background: #333; } 看似简单，但会带来三个实际问题：一是 HTML 结构被语义无关的样式类污染；二是每次新增组件都要手动补全所有主题下的样式规则，维护成本指数级上升；三是无法与 prefers-color-scheme 媒体查询自然联动，也无法被 calc() 或其他 CSS 函数实时参与计算。
:root + data-theme 是最稳的切换方式
核心是把主题变量全部挂载在 :root，再用属性选择器覆盖。必须写成 :root[data-theme="dark"]，而不是 .dark :root——后者语法合法但永远不生效，因为 :root 没有父元素，不可能是某个 class 的后代。
-
:root下定义默认（浅色）变量：--btn-bg: #007bff;、--text-color: #333; -
:root[data-theme="dark"]里重写同名变量：--btn-bg: #2c3e50;、--text-color: #ecf0f1; - 切换时只执行：
document.documentElement.setAttribute('data-theme', 'dark')或移除该属性
setThemeVars 函数要批量 setProperty，别漏 fallback
手动一个个调 style.setProperty() 容易漏写、顺序错乱，也难复用。封装函数时注意两点：一是所有按钮相关属性（background-color、color、border-color、box-shadow）必须统一从变量读取，不能混用硬编码；二是每个 var() 都得带 fallback，比如 color: var(--btn-text, #fff);，否则变量未定义时会失效。
示例函数：
立即学习“前端免费学习笔记（深入）”；
function setThemeVars(theme) {
const root = document.documentElement;
Object.entries(theme).forEach(([prop, value]) => {
root.style.setProperty(prop, value);
});
}
调用：setThemeVars({ '--btn-bg': '#50B399', '--btn-text': '#fff' });
Less/Sass 变量和 CSS 自定义属性不是一回事
很多人改了 @primary-color 却没效果，是因为 Less 变量在编译时就被替换成具体值，运行时根本不存在。真正起作用的是最终生成的 CSS 中那些 --primary-color 变量。
- 确保
variables.less是第一个@import，且只定义语义化顶层变量（如@primary-color: #1890ff;） - Sass 中同样不能靠
$primary-color控制运行时换肤，它只是编译期占位符 - 真正换肤逻辑必须落在浏览器运行时，也就是操作
document.documentElement.style或data-theme
最容易被忽略的点：Shadow DOM 中的 var() 默认不继承 :root 变量，需要显式用 inherit 或 initial 处理，否则自定义组件里颜色会断掉。
