小程序端实现全局实时换肤需依赖css变量+setproperty+主题类名切换三者协同：所有样式通过var(--xxx)引用，主题切换时更新:root变量值并添加theme-dark等类名触发重绘，避免动态link/style注入及setattribute覆盖。
小程序端（微信/支付宝/百度等）能实现真正的全局实时换肤，但必须绕开@import、uni.loadFontFace这类无效手段，核心靠 CSS 变量 + document.documentElement.style.setProperty + 主题类名切换三者协同。它不像 H5 那样支持动态插入 <link>，也不像 App 端需要调用原生 API 改导航栏——小程序端的限制反而更“干净”，只要变量生效、组件重绘及时，就能做到无感切换。
为什么小程序端不能用动态 link 或 style 标签注入主题？
微信小程序 WebView（尤其是基础库 2.25.2+）对运行时插入外部样式表有严格拦截：Failed to execute 'insertRule' on 'CSSStyleSheet' 是常见报错；@import 在编译期就被剥离，运行时写入无效；直接操作 document.styleSheets 在真机上多数为只读，且部分平台（如 QQ 小程序）会静默丢弃非编译期生成的规则。
真正可行的路径只有一条：所有颜色、背景、边框等视觉属性全部通过 var(--xxx) 引用，主题切换时仅更新 :root 下的变量值，由小程序渲染引擎自动触发重绘。
如何确保 CSS 变量在小程序里真正生效？
小程序对 :root 的支持是稳定的，但有两个关键细节常被忽略：
- 必须在
App.vue的<style></style>块中定义初始变量，例如：:root { --primary-color: #409eff; --bg-color: #ffffff; }—— 放在组件内或common/xxx.scss中，编译后可能被拆分到不同 scope，导致变量不可达 - 切换时不要用
document.documentElement.setAttribute('style', ...)，这会覆盖已有变量；应逐个调用document.documentElement.style.setProperty('--primary-color', '#ff6b6b') - 避免在
onLaunch里一次性 set 太多变量（>50 个），部分低端安卓机型 WebView 会卡顿；建议分批或节流
小程序端如何响应主题切换并重绘页面？
小程序不支持 Vue 的 watch 响应式监听全局状态变化来驱动样式更新，data-theme 类名切换才是最可靠的方式：
- 在
App.vue的onShow或自定义事件回调中，给document.documentElement添加/移除类名，例如：document.documentElement.className = 'theme-dark' - 对应 CSS 写成：
.theme-dark :root { --primary-color: #333; --bg-color: #1a1a1a; }，这样可避免 JS 批量 setProperty 的性能抖动 - 所有页面需在
onShow中主动读取当前主题并应用，不能依赖created或mounted—— 小程序页面生命周期中，onShow是唯一保证能拿到最新主题状态的钩子
图标、按钮等组件如何同步换肤？
uView、uni-ui 等主流组件库默认不响应 CSS 变量，需手动适配：
- 不要用
:style="{ color: themeColor }"绑定颜色，小程序里style绑定无法穿透到原生组件内部（如<uni-button></uni-button>的 shadow DOM） - 改用 class + CSS 变量组合：
<uni-button class="btn-primary"></uni-button>，并在 CSS 中写.btn-primary { background-color: var(--primary-color); } - tabBar 图标必须预置两套资源（
iconPath/selectedIconPath），通过uni.setTabBarStyle和uni.setTabBarItem手动切换，CSS 变量对 tabBar 图标无效
最易被忽略的点是：小程序端没有“冷启动丢失主题”的问题（因为本地存储读取快、页面栈稳定），但onShow时机和document.documentElement类名操作顺序一旦错位，就会出现“切换了但页面没变色”的假失败。务必把主题类名设置放在所有数据读取之后、页面渲染之前。
