按钮换肤必须使用 css 自定义属性，所有视觉属性（background-color、color、border-color、box-shadow）须从变量读取；通过 setthemevars 函数批量更新 :root 变量，确保深色模式下边框与阴影适配，并为 var() 提供 fallback 值。
按钮换肤必须用 CSS 自定义属性（不是 class 切换）
直接靠 class 切换主题会污染 HTML 结构、增加 JS 维护负担，且无法实现“声明式”响应——CSS 变量才是唯一能被 :root 动态接管、被 calc / var() 实时计算、被媒体查询/JS 同步更新的原生机制。
关键点在于：所有按钮视觉属性（background-color、color、border-color、box-shadow）必须从变量读取，而不是写死值。
-
:root下定义基础变量，如--btn-bg: #007bff、--btn-text: #fff - 按钮样式中统一用
background-color: var(--btn-bg)，不写任何具体颜色 - 换肤时只改
:root里的变量值，无需操作 DOM 或重写 CSS 规则
如何用 JavaScript 安全地批量更新 :root 变量
不能直接改 document.documentElement.style 里一堆 setProperty，容易漏项、难复用。推荐封装一个 setThemeVars 函数，接收主题对象并自动遍历写入：
function setThemeVars(theme) {
Object.entries(theme).forEach(([key, value]) => {
document.documentElement.style.setProperty(`--${key}`, value);
});
}
// 调用
setThemeVars({
'btn-bg': '#28a745',
'btn-text': '#fff',
'btn-border': '#1e7e34'
});
注意变量名要和 CSS 中 var(--btn-bg) 的键完全一致；JS 里用驼峰或短横线都行，但建议统一用短横线（和 CSS 习惯一致），避免大小写混淆。
深色模式下按钮边框与阴影容易失效
很多换肤方案只改背景和文字色，但 box-shadow 和 border 常被忽略，导致深色模式下按钮“发虚”或“看不见边框”。必须把它们也纳入变量体系：
- 定义
--btn-shadow: 0 1px 3px rgba(0,0,0,0.1)和--btn-border: 1px solid #dee2e6 - 在深色主题中同步调整为
rgba(255,255,255,0.1)和#495057等适配值 - 特别注意
box-shadow的 alpha 值——深色背景下用太高的透明度会看不见，建议控制在0.08–0.15区间
CSS 变量作用域与继承陷阱
变量默认不继承，但按钮子元素（如 span、i）若需要响应主题色，必须显式继承或重新声明。常见错误是给按钮设了 color: var(--btn-text)，但图标用了 <i class="icon"></i> 却没加 color: inherit，结果图标颜色卡死在初始值。
- 按钮内所有子元素应设
color: inherit或fill: var(--btn-text)（对 SVG） - 避免在按钮内部再写
:root或局部:host，CSS 变量只应在顶层统一管理 - 调试时用浏览器开发者工具的“Computed”面板检查
var(--xxx)是否被正确解析，而非只看 Styles 面板里的原始声明
最易被忽略的是变量 fallback 值——比如 color: var(--btn-text, #333)，一旦变量名拼错或未定义，按钮就彻底失色，连降级都不生效。每个 var() 都该带合理 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
