主题换肤必须用 JavaScript 修改 :root，但应通过切换 html.skin-dark 类名而非逐行 setProperty；皮肤规则须写在 html.skin-dark 下且置于默认 :root 之后；var 默认值仅在变量未定义或为空时生效；单位需用 calc()，字符串值不加引号；主题持久化靠 localStorage 存名称并早期还原 class。
主题换肤必须用 JavaScript 修改 :root 吗？
必须，但不是“逐个设值”那种写法。CSS 变量本身是静态的，:root 里定义的初始值不会响应用户点击或 localStorage 变化；浏览器只在变量值真正改变时触发重绘。所以主动切换（比如点按钮切深色/品牌蓝）离不开 JS，但关键在于怎么改——别用 document.documentElement.style.setProperty('--color-primary', '#0d6efd') 一行行硬写，维护成本爆炸，还容易漏。
皮肤 CSS 应该写在 html.skin-dark 还是 .skin-dark？
必须用 html.skin-dark。原因很实际：避免被组件局部 class 意外覆盖。比如某个第三方 UI 组件写了 .card { background: var(--bg-base) }，如果皮肤规则写成 .skin-dark { --bg-base: #121212 }，而页面结构是 <div class="card skin-dark">，那这个 .skin-dark 的优先级大概率低于 .card，变量根本不会被覆盖生效。
-
html.skin-dark选择器权重更高，且作用域天然全局 - 所有皮肤规则必须放在默认
:root块之后，否则会被初始值压住 - 别加
!important——CSS 变量不支持这个声明，写了等于没写
var(--color, #fff) 的默认值什么时候起作用？
只在变量名完全不存在、或值为空字符串时触发。比如用户清空了 localStorage，又没走初始化逻辑，document.documentElement.className 是空的，此时所有皮肤 class 都没挂上，--color-primary 就没被任何规则定义过，var(--color-primary, #1890ff) 才会回退到 #1890ff。
- 大小写敏感：
--Color和--color是两个变量 - 单位不能拼接：
--gap: 20+margin: var(--gap)px无效，得写margin: calc(var(--gap) * 1px) - 字符串值不能带引号：
--foo: '20px'错，--foo: 20px对
刷新后如何保持上次选的主题？
靠 localStorage 存名字，不是存整套变量值。JS 切换时只改 document.documentElement.className，同时写入 localStorage.setItem('preferred-skin', 'dark')；页面加载初期就读出来，还原 class：
立即学习“前端免费学习笔记（深入）”；
const saved = localStorage.getItem('preferred-skin') || 'default';
document.documentElement.className = saved === 'default' ? '' : `skin-${saved}`;这个逻辑必须放在 CSS 加载之后、DOM 渲染之前执行，否则会闪一下默认主题。最容易被忽略的是：如果用户手动删了 localStorage，或者首次访问，你得确保 :root 里有一组兜底变量值，否则页面可能一片空白或错乱。
