小程序无法动态插入CSS或执行insertRule，只能用JSON主题配置+CSS变量+uni.setStorageSync+页面级watch更新；需手动同步原生组件样式，且各页面须独立响应主题变化。
小程序端无法运行时动态插入 <link> 或执行 document.styleSheets.insertRule，所以所谓“动态下载皮肤包”本质上不是加载 CSS 文件，而是预编译 + 按需激活变量值。真正能落地的方案只有一种：用 JSON 主题配置 + CSS 变量 + uni.setStorageSync 持久化状态 + 页面级 watch 响应式更新。
为什么不能在小程序里动态 import 主题 CSS
微信/支付宝/QQ 小程序的渲染层是封闭沙箱，不暴露 document 对象，document.createElement('link') 会直接报错；require 和 import() 在小程序中仅支持静态分析路径，动态字符串路径（如 import(`./themes/${theme}.css`)）会被构建工具忽略或编译失败；即使强行用 uni.downloadFile 下载 CSS 内容，也没法注入到样式系统中——小程序没有 CSSStyleSheet 接口，更不支持 insertRule。
主题 JSON 配置必须扁平化且全量声明
主题配置不能嵌套太深，否则运行时遍历和映射成本高，也容易在某些低端安卓小程序中触发内存警告。推荐结构：
{
"light": {
"--primary-color": "#409eff",
"--bg-color": "#ffffff",
"--text-color": "#333333"
},
"dark": {
"--primary-color": "#1890ff",
"--bg-color": "#1f1f1f",
"--text-color": "#ffffff"
}
}
注意：-- 前缀必须统一，所有 key 必须是合法 CSS 变量名；不要省略单位（如 font-size 必须写 "--font-size": "16px"），否则运行时 setProperty 无效；颜色值避免使用 rgb() 或 hsl() 函数，部分小程序 WebView 解析不稳定。
切换主题时必须同步更新原生组件样式
小程序的 uni.setNavigationBarColor、uni.setTabBarStyle、uni.setTabBarItem 这些 API 不读取 CSS 变量，必须手动调用。例如：
- 切换主题后立即执行
uni.setNavigationBarColor({ backgroundColor: themeConfig[theme]["--bg-color"] }) - tabBar 图标需提前准备两套资源（如
tabbar-home-active.png/tabbar-home-inactive.png），再用uni.setTabBarItem动态替换iconPath和selectedIconPath - 如果用了自定义导航栏（
custom: true），则只需保证其内部元素使用了var(--xxx)，无需额外操作
页面重绘失效？检查是否漏了 watch 或 onThemeChange
小程序平台不触发 uni.onThemeChange 的常见原因有三个：未在 App.vue 的 onLaunch 中调用 uni.getSystemInfo（部分低版本需要先获取系统信息才能监听）、主题切换后没调用 uni.$emit('theme-change', theme) 主动广播、页面没在 onLoad 或 onShow 中订阅事件。更稳妥的做法是在每个页面的 setup 中写：
const themeStore = useThemeStore()
watch(() => themeStore.currentTheme, (newVal) => {
// 触发一次强制重绘：修改一个无视觉影响的 CSS 变量
document.documentElement.style.setProperty('--_force-repaint', Date.now().toString())
})
这个技巧能绕过小程序对纯变量变更的“惰性更新”机制，确保样式实时生效。别依赖 key 强制重渲染整个页面——性能差，且可能丢失表单输入状态。
最易被忽略的一点：小程序主题切换后，uni.getStorageSync('theme') 的值虽然变了，但已挂载的页面组件不会自动响应，必须靠事件或 store 的 watch 显式驱动；而 App 端可以靠 document.documentElement.style.setProperty 全局生效，小程序不行——它没有全局根样式作用域，每个页面的样式作用域是独立的，所以每个页面都得自己处理变量注入逻辑。
