theme-change.uvue

<template>
  <view class="uni-padding-wrap">
    <view class="uni-common-mt item-box">
      <text>osTheme:</text>
      <text id="theme">{{ osTheme }}</text>
    </view>
    <view class="uni-common-mt item-box">
      <text>应用当前主题:</text>
      <text id="theme">{{ appTheme }}</text>
    </view>

    <view>
      <view class="uni-title uni-common-mt">
        <text class="uni-title-text"> 修改appTheme主题（此处仅为演示API，本应用并未完整适配暗黑模式） </text>
      </view>
    </view>
    <view class="uni-list uni-common-pl">
      <radio-group @change="radioChange" class="radio-group">
        <radio class="uni-list-cell uni-list-cell-pd radio" v-for="(item, index) in items" :key="item"
          :class="index < items.length - 1 ? 'uni-list-cell-line' : ''" :value="item"
          :checked="index === current">
          {{ item }}
        </radio>
      </radio-group>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        osThemeChangeId: 0,
        appThemeChangeId: 0,
        osTheme: "light" as string,
        appTheme: "light" as string,
        current: 0,
        items: [
          "light",
          "dark",
          "auto"
        ] as string[]
      }
    },
    methods: {
      bindOsThemeChange(): number {
        //注册osTheme变化监听
        return uni.onOsThemeChange((res: OsThemeChangeResult)=> {
          this.osTheme = res.osTheme
        })
      },
      bindAppThemeChange(): number {
        //注册appTheme变化监听
        return uni.onAppThemeChange((res: AppThemeChangeResult) => {
          this.appTheme = res.appTheme
        })
      },
      radioChange(e : UniRadioGroupChangeEvent) {
        const theme = e.detail.value
        this.setAppTheme(theme)
        uni.showToast({
          icon: 'none',
          title: '当前选中:'+theme,
        })
      },
      setAppTheme(value: string) {
        uni.setAppTheme({
          theme: value,
          success: function() {
            console.log("设置appTheme为", value, "成功")
          },
          fail: function(e: IAppThemeFail) {
            console.log("设置appTheme为", value, "失败,原因:", e.errMsg)
          }
        })
      }
    },
    onReady() {
      uni.getSystemInfo({
        success: (res:GetSystemInfoResult) => {
          this.osTheme = res.osTheme!
          this.appTheme = res.appTheme == "auto" ? res.osTheme! : res.appTheme!
          this.current = this.items.indexOf(res.appTheme!)
        }
      })
      this.osThemeChangeId = this.bindOsThemeChange()
      this.appThemeChangeId = this.bindAppThemeChange()
    },
    onUnload() {
      //注销监听
      uni.offAppThemeChange(this.appThemeChangeId)
      uni.offOsThemeChange(this.osThemeChangeId)
    }
  }
</script>

<style>
  .item-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .uni-list-cell {
    justify-content: flex-start;
  }
</style>