uni-app实现点击切换主题颜色 uni-app全局变量控制样式-uni-app-PHP中文网

不必用vuex或$u.store；最轻量方式是uni.setstoragesync持久化主题+app.vue的onlaunch/onshow注入class，h5用document.documentelement.style.setproperty更新css变量，小程序/app用预设class切换，配合computed读取主题值动态绑定样式。

uni-app实现点击切换主题颜色 uni-app全局变量控制样式

主题颜色切换必须用 Vuex 或 `$u.store` 吗？

不是。uni-app 中主题切换最轻量、最可控的方式是用 uni.setStorageSync + App.vue 的 onLaunch 和 onShow 做全局样式注入，配合 uni.addStyle（H5）或动态 class（App/小程序）。Vuex 会增加不必要的响应式开销，尤其只改颜色变量时。

关键点：主题色本质是 CSS 变量（:root），不是状态数据。直接操作样式表比驱动整个 store 更快、更稳定。

小程序不支持动态修改 :root，需用 class 切换预设样式块（如 theme-dark）
H5 可用 document.documentElement.style.setProperty 实时更新 CSS 变量
App 端（iOS/Android）建议统一走 class 方案，避免原生渲染层样式缓存问题

如何在 App.vue 中注入主题 class 并持久化选择？

在 App.vue 的 onLaunch 里读取本地存储的主题标识，然后给（H5）或根 <view></view>（小程序/App）加对应 class；同时监听 onShow 防止后台切回时失效。

// App.vue
export default {
  onLaunch() {
    const theme = uni.getStorageSync('theme') || 'light'
    this.setThemeClass(theme)
  },
  onShow() {
    const theme = uni.getStorageSync('theme') || 'light'
    this.setThemeClass(theme)
  },
  methods: {
    setThemeClass(theme) {
      // H5：操作 body class
      if (process.env.UNI_PLATFORM === 'h5') {
        document.body.className = `theme-${theme}`
      }
      // 小程序/App：通过 $scope.globalData 或 provide/inject 透传，但更推荐页面级 class 绑定
      // 此处可触发全局事件通知子组件重绘
      uni.$emit('themeChanged', theme)
    }
  }
}

注意：uni.setStorageSync('theme', 'dark') 必须在用户点击后立刻执行，否则切页再回来就丢失了。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

页面中怎么响应主题变化并避免重复渲染？

不要在每个页面的 data 里存一份 theme，而是用 computed 直接读取存储值，或监听全局事件。否则多个页面同时响应会造成样式抖动。

推荐写法：在页面 computed 中返回 uni.getStorageSync('theme')，配合 v-bind:class 动态绑定
避免写法：在 data 初始化 theme，再用 watch 监听 uni.$on('themeChanged') —— 容易漏掉 onUnload 解绑，导致内存泄漏
样式文件里提前写好两套规则，比如 .theme-dark .btn { background: #333; } 和 .theme-light .btn { background: #fff; }

示例片段：

<template><view class="btn" :class="'theme-' + currentTheme">按钮</view></template><script>
export default {
  computed: {
    currentTheme() {
      return uni.getStorageSync('theme') || 'light'
    }
  }
}
</script>