CSS变量换肤核心是将主题色等抽为:root下的--primary-color等自定义属性，换肤时仅用document.documentElement.style.setProperty()修改，所有var(--primary-color)自动响应，避免遍历元素或注入style标签。
怎么用CSS变量实现换肤，且不刷新页面
核心就一条：把主题色、背景色这些可变值抽成 --primary-color 这类自定义属性，挂载在 :root 上，换肤时只改这个节点的样式声明，所有用到它的元素自动响应。
别去遍历每个元素手动改 style.color，也别用 JS 拼接一大段 CSS 字符串注入 <style> 标签——前者性能差，后者难维护、易冲突。
- 换肤本质是切换一组预设的 CSS 变量值，不是重写整套样式表
-
:root是全局作用域，子元素用var(--primary-color)就能继承，无需重复声明 - JS 改变量只需一行：
document.documentElement.style.setProperty('--primary-color', '#3b82f6');
为什么直接改 document.body.className 不够用
靠 class 切换主题（比如加 theme-dark）确实可行，但容易漏覆盖、难扩展。一旦组件里用了内联样式或第三方库的硬编码颜色，class 就失效了。
CSS 变量的优势在于“穿透力”：它能覆盖内联样式（只要没加 !important），也能被 calc()、rgba() 等函数直接调用，而 class 方案得为每种组合写一堆冗余规则。
立即学习“前端免费学习笔记（深入）”；
- 例如
color: var(--text-color);比.theme-dark .btn { color: #e2e8f0; }更简洁可控 - 深色模式下想让边框略透明？直接改
--border-alpha: 0.12;，所有border-color: rgba(0,0,0,var(--border-alpha));全部生效 - 第三方组件没暴露 class？只要它支持 CSS 变量（比如很多现代 UI 库已内置），就能统一接管
prefers-color-scheme 怎么和手动换肤共存
系统偏好（prefers-color-scheme: dark）只能作为默认值参考，不能替代用户主动选择。很多人开了系统暗色，但网页里就想用亮色——你得允许覆盖。
典型错误是把媒体查询写死在 CSS 里，导致 JS 换肤后又被媒体查询“扳回去”。正确做法是：媒体查询只设初始值，后续一切以 JS 设置的 document.documentElement.style 为准。
- 初始加载时读取
window.matchMedia('(prefers-color-scheme: dark)').matches，设一次变量 - 用户点击换肤按钮后，JS 直接写
style.setProperty，不依赖媒体查询重算 - 如果还想响应系统变化，监听
matchMedia的change事件，但仅当用户没手动选过主题时才更新
换肤后部分颜色不生效的常见原因
不是变量没生效，大概率是 CSS 优先级或作用域问题。最常踩的坑就三个：
- 用了
!important覆盖变量，比如color: #fff !important;—— 它会无视var(--text-color) - 变量名拼错或大小写不一致：
--Primary-Color和--primary-color是两个变量 - 在伪元素或 Shadow DOM 里没继承：:root 下的变量默认不进 Shadow Root，需要在组件内部显式继承或重设
- 旧版 Safari 对
var()在@keyframes或某些属性（如font-weight）中支持不全，测试时别只看 Chrome
换肤这事，变量声明位置、JS 执行时机、第三方样式隔离，三者稍有错位就会断链。调试时先查 getComputedStyle(document.documentElement).getPropertyValue('--primary-color')，确认变量真被设进去了，再往下找渲染问题。
