CSS多皮肤方案核心是用body类隔离的:root变量，如body.skin-dark{--primary-color:#333}，切换时仅修改body class，无需JS操作CSSOM；注意避免硬编码颜色、确保变量作用域覆盖全局、合理使用fallback。
怎么在CSS里定义多套皮肤变量
核心是把不同皮肤的色值，按统一命名规则写进 :root 下的 CSS 变量，再用 class 做作用域隔离。别直接改 :root 本身，否则所有皮肤会互相覆盖。
- 每个皮肤对应一个 body class，比如
body.skin-dark、body.skin-blue - 变量名保持一致，只变值：比如都叫
--primary-color，但 dark 里是#333，blue 里是#2563eb - 必须用
!important吗？不用。只要选择器优先级够（body.skin-dark比纯:root高），就能自然覆盖 - 别漏掉 fallback：定义变量时写成
color: var(--primary-color, #007bff)，防止 JS 切换失败时有兜底
JS切换皮肤时只改body class就行
不需要操作 CSSOM、不重写 style 标签、不调用 getComputedStyle——只要给 body 切换 class，浏览器会自动重新计算所有 var() 的取值。
- 用
document.body.classList.replace()最稳妥，避免重复添加或遗漏移除 - 别用
className = 'skin-dark'，会清空其他可能存在的 class（比如loaded或theme-ready） - 切换后无需手动触发重绘，但要注意：如果某些元素用了
will-change: transform或contain: paint，极少数情况下可能卡住变量更新，临时去掉试试 - 示例：
document.body.classList.replace('skin-light', 'skin-dark')
为什么有些颜色切了没反应
大概率是变量没被正确继承，或者被更高优先级规则硬编码覆盖了。
- 检查是否在组件内写了死值，比如
color: #3b82f6，它比color: var(--primary-color)更“坚决”，变量切了也白切 - 确认变量是否真的在生效作用域里：比如
.skin-dark .btn里定义了--primary-color，但按钮实际在.skin-dark .modal .btn里，而 modal 没继承该变量——得把变量放到body.skin-dark下才全局有效 - Chrome DevTools 里看 computed 样式，点开 color 属性，能看到它到底取的是哪个
var()，以及 fallback 是什么 - 注意伪元素（
::before）和 SVG 的fill也要显式声明color或fill: var(--text-color)，它们不自动继承 CSS 变量
深色模式自动适配要不要额外处理
可以，但别让 JS 主动读 prefers-color-scheme 再设 class——交给 CSS 自己响应更轻量、更可靠。
立即学习“前端免费学习笔记（深入）”；
- 在 CSS 里直接写
@media (prefers-color-scheme: dark) { body:not([class*='skin-']) { --bg-color: #111; } }，这样无 class 时也能兜底 - 如果用户手动选了皮肤（比如点了“蓝色主题”），就以手动为准，忽略系统偏好。这时 JS 设置的 class 会自然压过媒体查询
- 不要在 JS 里监听
matchMedia并反复 setClass，容易和用户主动切换冲突；真要同步，用storage事件做跨 tab 同步就够了
var(--a, var(--b, var(--c)))）在旧版 Safari 里可能解析失败。一套皮肤变量控制在 15 个以内，命名扁平些，别为了“语义”搞出 --card-header-bg-hover-active-focus 这种东西。 
