App端换肤不依赖$scope.$apply，因使用原生渲染器，需手动同步JS状态、本地存储和原生样式（如导航栏、tabBar），并用CSS变量+data-theme切换主题。
App端换肤必须用 $scope.$apply 吗？不，uni-app 的 App 端不走 Vue 响应式更新机制
在 uni-app 的 App 端（iOS/Android），Vue.set 或直接赋值修改响应式数据，**不会触发原生渲染层重绘主题色**。这是因为 App 端使用的是 native 渲染器（如 Weex 引擎或自研原生桥），样式变更需显式通知原生层。直接改 uni.getStorageSync('theme') 或全局变量，UI 不会自动变——这是最常被忽略的前提。
实操建议：
- 换肤逻辑必须同步更新三处：JS 全局状态、本地持久化存储、原生侧的样式注册（通过
uni.setNavigationBarColor、uni.setTabBarStyle和自定义组件内style绑定） - 不要依赖
watch监听主题变量变化来驱动 UI 更新；App 端 watch 失效率高，应改用事件总线或onLoad/onShow时主动读取并应用 - 推荐把主题配置抽成纯对象（如
themes.dark），避免在组件中写v-if="theme === 'dark'"这类硬判断，后期扩展新主题（如 ocean、sepia）更可控
怎么安全地管理全局主题变量？别用 Vue.prototype，改用 uni.$u 或 globalData
Vue.prototype 在 App 端 H5 和小程序表现不一致，且在条件编译下容易漏初始化；globalData 是 uni-app 官方推荐的跨页面共享方式，但注意它只在 App.vue 的 onLaunch 中初始化一次，后续修改需手动同步。
实操建议：
- 在
App.vue的onLaunch中读取uni.getStorageSync('theme')，存入uni.$u.theme（需先挂载uni.$u = { theme: 'light' }）或getApp().globalData.theme - 换肤时统一调用一个函数，例如
changeTheme(newTheme)，内部做三件事：写入 storage、更新uni.$u.theme、触发uni.$emit('themeChange', newTheme) - 所有需要响应换肤的页面，在
onLoad或onShow中调用uni.$on('themeChange', ...)，并在onUnload解绑——App 端事件监听不自动销毁，不清理会导致内存泄漏
组件内如何动态绑定主题色？别用 :style="{ color: themeColor }"，改用 CSS 变量 + class 切换
频繁用 :style 绑定颜色值，在 App 端会引发大量 style diff，性能差且部分原生组件（如 uni-button）不支持运行时 style 覆盖。CSS 变量（--theme-primary）才是 App 端换肤最稳定的方式。
实操建议：
- 在
App.vue的<style></style>中定义两套 CSS 变量：
:root[data-theme="light"] {
--theme-primary: #007aff;
--theme-bg: #ffffff;
}
:root[data-theme="dark"] {
--theme-primary: #0a84ff;
--theme-bg: #121212;
}
document.documentElement.setAttribute('data-theme', 'dark') 切换根节点属性（App 端有效）class="text-primary bg-page" 配合 CSS 类名映射变量，例如：.text-primary { color: var(--theme-primary); }
@media (prefers-color-scheme)，无法自动适配系统深色模式，必须手动控制tabBar 和导航栏颜色怎么同步更新？uni.setTabBarStyle 必须加 success 回调再改页面
很多人调用 uni.setTabBarStyle 后立刻跳转或刷新页面，结果 tabBar 颜色闪一下又回退——这是因为原生 tabBar 样式变更异步执行，JS 层已继续执行后续逻辑，导致状态错乱。
实操建议：
- 换肤函数中，按顺序调用：
uni.setNavigationBarColor→uni.setTabBarStyle→ 在其success回调里再更新页面内组件状态（如重新设置data-theme属性） - tabBar 图标颜色不能只靠
color字段，iOS 下需提供两套图标资源（iconPath和selectedIconPath），否则深色模式下图标可能不可见 - 如果用了自定义 tabBar（
custom: true），则完全由前端控制，此时必须监听themeChange事件，并在自定义组件中this.setData({ theme })触发重绘
真正麻烦的不是换肤本身，而是 App 端每种原生能力（导航栏、tabBar、下拉刷新背景、input 光标色）都得单独处理，而且没有统一的“刷新整个 App 主题” API。每次新增一个需要主题色的 UI 元素，就得回头补一处同步逻辑。
