必须将主题变量定义在:root中以确保全局可访问，js通过setproperty动态修改document.documentelement.style中的变量值，配合localstorage持久化和prefers-color-scheme兜底，实现无刷新、不闪白、全组件同步的主题切换。
怎么用 :root 定义可切换的 CSS 变量
核心是把按钮样式中会变的部分（比如颜色、圆角）抽成 CSS 自定义属性，统一挂到 :root 下，这样全局都能访问，也方便后续批量替换。
别在每个按钮类里写死 background-color 或 border-radius，而是用 var(--btn-bg) 和 var(--btn-radius) 替代。
-
:root里定义默认值，比如：:root { --btn-bg: #007bff; --btn-radius: 4px; } - 按钮样式统一写：
.btn { background-color: var(--btn-bg); border-radius: var(--btn-radius); } - 变量名尽量语义化，避免用
--color1这种，改起来容易错位
怎么用 JavaScript 切换主题变量值
切换不是重载 CSS 文件，而是动态修改 :root 上的变量值。直接操作 document.documentElement.style 最简单可靠。
注意：不要用 document.body.style，body 不是变量作用域根节点；也不要手动拼字符串改 style 属性，容易覆盖已有变量。
- 深色主题切换示例：
document.documentElement.style.setProperty('--btn-bg', '#28a745'); document.documentElement.style.setProperty('--btn-radius', '8px'); - 可以封装一个函数，接收主题配置对象，循环调用
setProperty - 如果按钮还依赖其他变量（如文字色、悬停偏移），一并设进去，漏掉一个就会样式断裂
怎么避免圆角和颜色切换不同步导致的视觉跳变
用户点击切换时，如果颜色瞬间变、圆角延迟生效（或反之），会感觉卡顿或“错位”。这不是动画问题，而是 CSS 计算顺序和渲染时机差异导致的。
根本解法是确保所有相关变量在同一帧内完成设置 —— 不要用 setTimeout 分开设，也不要在不同事件回调里分散更新。
- 把所有要改的变量塞进一次
style.setProperty调用（虽然得调多次，但必须同步） - 避免在
transition中只监听部分属性，比如写了transition: background-color .2s却忘了加border-radius，结果圆角突变 - 如果用了 CSS
@media或 JS 检测系统偏好，确保它和手动切换逻辑不冲突 —— 例如用户手动切到圆角大主题，系统暗色模式又偷偷把--btn-bg改回深色，颜色就打架了
怎么让老浏览器（比如 IE）降级处理
CSS 变量在 IE 完全不支持，var(--x) 会直接当无效声明丢弃，按钮就变成浏览器默认样式（通常是无背景、直角），体验断层明显。
不能靠 @supports 包裹整个按钮规则（那样 IE 里整条规则都不生效），而要在变量使用处做 fallback。
- 写法必须是：
.btn { background-color: #007bff; background-color: var(--btn-bg); border-radius: 4px; border-radius: var(--btn-radius); } - 前面的静态值是给 IE 的兜底，后面的
var()是现代浏览器覆盖 - 别用
!important强行覆盖 fallback，IE 会忽略整条声明；也别指望 PostCSS 插件自动补，它无法判断哪些变量该保留 fallback
setProperty，而是保证所有用到这些变量的组件（不只是按钮，还有输入框、卡片、标签）都遵循同一套变量命名和更新节奏。漏掉一个地方，主题就“破窗”了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
