小程序无法用 document.documentelement.style.setproperty 修改 css 变量，因 webview 不暴露 document 对象；必须通过 class 切换预设主题样式、在 app.vue onlaunch/onshow 中注入 class 并持久化，且需全局引入样式、避免 scoped 和内联 style 冲突。
小程序端无法直接修改 :root CSS 变量，主题切换必须靠 class 切换 + 预设样式块，持久化必须用 uni.setStorageSync，且 App.vue 的 onLaunch/onShow 是唯一可靠注入时机。
为什么不能在小程序里用 document.documentElement.style.setProperty？
微信小程序的 WebView 不暴露 document 全局对象，document.documentElement 在小程序环境为 undefined，任何基于 DOM 操作 CSS 变量的写法都会静默失败或报错 Cannot read property 'style' of undefined。H5 端可用，但小程序和 App 端必须放弃该路径。
如何用 class 切换实现真正的动态主题？
核心是「预设 + 注入 + 绑定」三步闭环：
- 在
static/css/themes/下建theme-light.css和theme-dark.css，每个文件只含纯 class 选择器规则（如.theme-dark .header { background: #1a1a1a; }），不带:root - 在
App.vue的onLaunch和onShow中读取本地存储：const theme = uni.getStorageSync('app_theme') || 'light'，然后调用uni.addSubNVue或直接操作document.body.className（仅 H5）——但小程序只能走 class 注入：用uni.setNavigationBarColor同步顶部栏，并给添加对应 class（uni-app 小程序实际渲染时会将 class 透传到根节点） - 所有页面组件用
:class动态绑定，例如<view :class="['card', `theme-${$store.state.theme}`]"></view>；不要依赖 computed 从 store 读取后拼字符串，避免响应式断裂
持久化与跨页面同步失效的三个关键点
常见现象是“点了切换、刷新就回退”或“A 页面切了主题，B 页面没变”，根本原因不是逻辑错，而是时机和作用域不对：
-
uni.setStorageSync('app_theme', 'dark')必须在App.vue的onLaunch之后立即执行，不能等到某个页面的onLoad才存——小程序分包加载时，首页可能比App.vue更早执行 - Pinia store 里的 theme state 必须配
persist选项，且 storage adapter 显式指向uni.setStorageSync，否则 store 重建后 state 为空，而本地 storage 里有值，造成“有存无读” - 小程序双线程模型下，每个页面是独立 JS 上下文，
this.$store在onLoad里可能还未初始化；必须在onReady后再访问 store，或改用getCurrentInstance().appContext.app.config.globalProperties.$store安全取值
主题色实时生效但页面不重绘？检查这三处
class 已正确添加，样式也预设好了，但 UI 没变——大概率是 CSS 优先级或作用域问题：
- 确认预设主题 CSS 文件已通过
<import></import>或import全局引入，未被条件编译#ifdef MP-WEIXIN包裹掉（JS 模块导入不走条件编译，但样式 import 会） - 避免在组件
<style scoped></style>里写主题相关样式，scoped 会加属性选择器，导致.theme-dark .btn[data-v-xxx]无法匹配全局 class 注入 - 如果用了 uView Plus 等 UI 库，检查其组件是否封装了内联 style；需手动在组件上加
:class覆盖，例如<u-button :class="`theme-${theme}`"></u-button>
最易被忽略的是：小程序主题 class 必须在冷启动时就注入，而不是等用户第一次点击才写入 storage —— 因为 onLaunch 只执行一次，错过就永远不同步。别信“页面里存完再通知 App.vue”，那条通知链在小程序里根本不可靠。
