小程序端换肤不能直接改 document.documentElement.style，因无 document 对象；须用 data-theme + 动态 class 切换，配合 uni.setTabBarStyle、uni.setNavigationBarColor 及图标资源替换，并持久化主题状态至本地存储。
小程序端换肤为什么不能直接改 document.documentElement.style
因为微信小程序（及其他小程序平台）根本没有 document 对象，也没有 CSSStyleSheet 实例，所有 DOM 操作类 API 都不可用。试图在小程序环境里执行 document.documentElement.style.setProperty 会直接报 Cannot read property 'style' of undefined 或静默失败。这是最常踩的第一个坑——把 App/H5 的换肤逻辑原样搬进小程序，必崩。
小程序端必须用 data-theme + 条件编译 class 切换
小程序的 WXML 渲染层只认 class 绑定和属性绑定，不解析 CSS 变量（var(--xxx) 在 wxss 中无效）。所以必须走“预编译多主题样式 + 运行时切换根节点 class”的路径：
- 在
App.vue的<template>根元素上加动态 class：<view :class="['app-root', 'theme-' + theme]"> - 所有主题色定义在
uni.scss或独立theme.scss中，用嵌套写法隔离作用域：.theme-dark .header { background-color: #1e1e1e; } - 避免在组件内写
v-if="theme === 'dark'"控制样式，而应统一用 class 触发样式规则，否则小程序 diff 会丢样式 - 注意：微信小程序基础库
2.27.0+才开始部分支持var()，但仅限于内联style属性，且不推荐用于全局换肤——兼容性差、调试困难、无法覆盖原生组件（如<button>）
如何让 tabBar 和导航栏也跟着换肤
小程序原生控件（tabBar、navigationBar）不响应 class 变化，必须调用对应 API 主动设置：
- 切换主题时立刻调用
uni.setTabBarStyle，传入与当前主题匹配的color、selectedColor、backgroundColor - 导航栏颜色需在每个页面的
onLoad中调用uni.setNavigationBarColor，不能只在App.vue做一次——小程序页面栈独立，不继承根节点样式 -
tabBar图标必须准备两套资源（tabbar-home-light.png/tabbar-home-dark.png），通过uni.switchTab或页面onShow时用uni.setTabBarItem动态替换iconPath和selectedIconPath - 别忘了在
pages.json中关闭"navigationStyle": "custom"页面的原生导航栏，否则uni.setNavigationBarColor不生效
主题状态持久化与跨页面同步的关键点
小程序没有全局 window 对象，也不能依赖 Vue 响应式自动触发重绘，主题状态必须手动透传：
- 用
uni.setStorageSync('theme', 'dark')写入，但读取时机很重要：必须在App.vue的onLaunch和每个页面的onLoad中都调用uni.getStorageSync('theme')，不能只存不读 - 不要用 Vuex/Pinia 存主题状态——小程序端 store 数据不会自动同步到视图层，仍需手动
this.theme = uni.getStorageSync('theme') - 如果用了自定义组件（如封装的
ThemeButton），必须在组件内部watchthemeprop 并触发this.$forceUpdate()，否则组件样式不会更新 - 冷启动时，
App.vue的onLaunch早于页面onLoad，但页面首次渲染可能取到旧值，建议在onShow中再校验一次本地存储并强制刷新 class
小程序端换肤真正的复杂点不在样式定义，而在「三处不同步」：WXML class、原生控件 API、自定义组件内部状态。任何一处漏掉，就会出现按钮变色了但 tabBar 还是白的，或者首页切了暗色但二级页还是亮色——这种问题没法靠热重载发现，必须真机测试每一页的 onShow 生命周期。
