App端换肤本质是动态切换CSS变量，因不支持CSS HMR或运行时注入，需通过JS控制:root变量值实现；预编译多套样式表虽可行但有白屏风险，推荐CSS变量方案。
App端换肤本质是动态切换CSS变量还是重载样式表
uni-app在App端（iOS/Android）不支持CSS HMR或运行时注入
推荐优先走CSS变量方案——它在App端稳定、无白屏、热更新友好，且uni-app 3.9+已对App.vue中:root的动态修改做了原生适配优化。
如何用CSS变量实现uni-app App端全局动态换肤
核心是三步：定义变量、挂载到:root、用JS切换变量值。注意App端uni.setStorageSync必须配合uni.getStorageSync读取初始主题，否则冷启动会丢失状态。
- 在
App.vue的里统一声明所有主题变量，例如：:root { --primary-color: #409eff; --bg-color: #ffffff; } - 在
onLaunch中读取本地存储的主题名，并调用document.documentElement.style.setProperty批量设置变量值 - 避免直接操作
document.styleSheets——App端WebView对此支持极差，容易报Failed to execute 'insertRule' on 'CSSStyleSheet' - 主题切换函数建议封装成
setTheme(themeName)，内部用Object.keys(themeConfig[themeName]).forEach(key => document.documentElement.style.setProperty(key, themeConfig[themeName][key]))
为什么App端不能用uni.loadFontFace或@import动态加载主题CSS
uni.loadFontFace只管字体，和样式无关；@import在编译期就被处理掉了，运行时无效。更关键的是：App端WebView（尤其是iOS UIWebView/WKWebView）不支持通过JS动态创建并插入后立即生效——即使插入成功，样式也不会重绘，必须触发强制重排（如offsetHeight），但uni-app的页面结构受Vue响应式约束，强行触发易导致Maximum call stack size exceeded。
实测发现：用uni.createSelectorQuery().select('view').boundingClientRect()这类API间接触发重排，反而比直接改className更可靠。但代价是切换延迟约120ms，且需确保目标节点存在。
主题配置与组件内使用变量的避坑点
别在组件里直接写color: var(--primary-color)——scoped模式下编译器会加属性选择器，导致变量无法继承。必须用（非scoped）或在里显式穿透：
- 写法正确：
.my-btn { color: var(--primary-color); } - 错误写法：
<style scoped> .my-btn { color: var(--primary-color); } </style>（编译后变成.my-btn[data-v-xxx] { color: var(--primary-color); }，而:root变量不在该作用域链） - 如果必须用scoped，得加
::v-deep或:deep()（uni-app 3.6+支持）：:deep(.my-btn) { color: var(--primary-color); } - 深色模式下慎用
background: #000硬编码——应统一走--bg-color，否则换肤时背景不会变，只变文字
最麻烦的其实是原生组件：比如的内部样式无法被CSS变量影响，它们的颜色由系统或原生SDK控制，只能靠平台条件编译+不同主题下传不同color属性值来折中处理。
