小程序端无法用CSS变量动态更新:root，因WebView不支持运行时修改自定义属性；必须通过class切换+预编译主题样式、同步原生组件API、按主题加载静态资源三者协同实现换肤。
小程序端为什么不能直接用 CSS 变量动态更新 :root
微信/支付宝小程序的 WebView 不支持运行时修改 :root 的 CSS 自定义属性，document.documentElement.style.setProperty('--color', 'red') 在小程序里完全无效——它既不会触发样式重算，也不会影响任何 var(--color) 的取值。这不是 bug，而是基础库限制：小程序样式系统在编译期就固化了变量引用关系，运行时无法注入或覆盖。所以你看到“主题切换没反应”，大概率是卡在这一步。
必须用 class 切换 + 预编译主题样式规则
小程序端唯一稳定可行的方式，是把不同主题的样式写死成 class 规则，再通过动态绑定 class 控制生效范围。比如：
.theme-light .btn { color: #333; background: #fff; }
.theme-dark .btn { color: #fff; background: #222; }
关键点：
- 所有主题样式必须写在
App.vue或全局uni.scss中，不能分散在页面级样式里（小程序不支持跨文件样式作用域穿透） - 根容器必须带动态 class，例如
<view :class="['app-wrapper', 'theme-' + theme]">，不能只给 body 或 page 加（小程序没有 body） - 避免使用嵌套过深的选择器（如
.theme-dark .page .content .text），小程序对选择器层级有硬限制（通常 ≤ 4 层），超限会静默失效 - 图标、背景图等资源需按主题名分目录存放，例如
/static/icons/dark/home.png和/static/icons/light/home.png，用:src="'/static/icons/' + theme + '/home.png'"绑定
如何同步原生 UI 元素（TabBar、NavigationBar）
小程序的 TabBar 和 NavigationBar 是原生组件，CSS class 切换对它们完全无效，必须调用对应 API 手动设置：
- 切换主题后立刻执行
uni.setTabBarStyle({ backgroundColor: '#222', selectedColor: '#409eff' })，否则底部栏颜色还是旧的 - 导航栏标题颜色、背景色需配合
uni.setNavigationBarColor，注意 iOS 和安卓对frontColor（文字颜色）取值要求不同：iOS 要'#000000'或'#ffffff'，安卓可接受任意十六进制 - TabBar 图标必须用两套独立路径，调用
uni.setTabBarItem逐个替换，不能指望 class 切换自动映射 —— 小程序的 iconPath 是原生加载的，不走 Vue 响应式 - 务必在
onShow生命周期里再次检查并同步一次原生样式，防止用户从后台切回时状态不同步
主题状态管理别碰 vuex / globalData 直接读写
小程序端页面实例隔离严格，vuex store 实例可能被多个页面共享但状态不一致；getApp().globalData 又只在 App.vue 初始化时赋值一次，后续改了其他页面读不到。最简方案是：
- 所有页面统一用
computed直接读取uni.getStorageSync('theme')，不要存到 data 或 vuex - 切换按钮点击时，**立刻**执行
uni.setStorageSync('theme', 'dark')，再触发页面重绘逻辑，不能延迟 - 监听系统主题变化不可靠：
uni.onThemeChange在部分低版本基础库中不触发，且微信小程序根本不支持prefers-color-scheme，别依赖它做自动切换 - 如果用了 uView 等 UI 库，确认其组件是否支持
themeprop 或 class 注入，否则要自己封装一层 wrapper 组件透传主题类名
小程序端换肤真正的复杂点不在样式本身，而在于「三处必须同步」：页面 class、原生组件 API、静态资源路径。漏掉任意一处，就会出现文字变暗但 TabBar 还是白的、图标没换但背景色已切的割裂感。每次切换后建议人工验证这三项是否同时生效。
