uview-plus 3.7.36 → 3.8.18

package/index.js

@@ -43,6 +43,95 @@ import fontUtil from './components/u-icon/util.js';
 
 // i18n
 import i18n, { t } from './libs/i18n/index.js'
+import {
+    themeState,
+    setTheme,
+    setThemePreference,
+    getThemePreference,
+    getSystemTheme,
+    getThemeVars,
+    initThemeSystem,
+    refreshThemeFromConfig,
+    syncThemeColorOverrideState
+} from './libs/theme/theme.js'
+import {
+    applyNativeThemeUI,
+    getThemeCardStyle,
+    getThemeIsDark,
+    getThemePageStyle,
+    getThemeTabBarStyle,
+    getThemeVar,
+    getThemeVarsForStyle
+} from './libs/theme/runtime.js'
+
+const rootToastState = {
+    ref: null
+}
+const rootNotifyState = {
+    ref: null
+}
+
+function normalizeRootToastOptions(options = {}) {
+    const toastOptions = typeof options === 'string'
+        ? { message: options }
+        : (options && typeof options === 'object' ? { ...options } : {})
+    if (!toastOptions.message && toastOptions.title) {
+        toastOptions.message = toastOptions.title
+    }
+    return toastOptions
+}
+
+function setRootToastRef(ref = null) {
+    rootToastState.ref = ref || null
+}
+
+function rootToast(options = {}) {
+    const toastOptions = normalizeRootToastOptions(options)
+    const toastRef = rootToastState.ref
+    if (toastRef && typeof toastRef.show === 'function') {
+        toastRef.show(toastOptions)
+        return
+    }
+    if (!toastOptions.message) return
+    if (typeof uni !== 'undefined' && typeof uni.showToast === 'function') {
+        uni.showToast({
+            title: toastOptions.message,
+            icon: 'none',
+            duration: Number(toastOptions.duration) || 2000,
+        })
+    }
+}
+
+function normalizeRootNotifyOptions(options = {}) {
+    const notifyOptions = typeof options === 'string'
+        ? { message: options }
+        : (options && typeof options === 'object' ? { ...options } : {})
+    if (!notifyOptions.message && notifyOptions.title) {
+        notifyOptions.message = notifyOptions.title
+    }
+    return notifyOptions
+}
+
+function setRootNotifyRef(ref = null) {
+    rootNotifyState.ref = ref || null
+}
+
+function rootNotify(options = {}) {
+    const notifyOptions = normalizeRootNotifyOptions(options)
+    const notifyRef = rootNotifyState.ref
+    if (notifyRef && typeof notifyRef.show === 'function') {
+        notifyRef.show(notifyOptions)
+        return
+    }
+    if (!notifyOptions.message) return
+    if (typeof uni !== 'undefined' && typeof uni.showToast === 'function') {
+        uni.showToast({
+            title: notifyOptions.message,
+            icon: 'none',
+            duration: Number(notifyOptions.duration) || 3000,
+        })
+    }
+}
 
 // 导出
 let themeType = ['primary', 'success', 'error', 'warning', 'info'];
@@ -58,10 +147,21 @@ export * from './libs/function/colorGradient.js'
  * @param {object} zIndex 修改内置zIndex属性
  */
 export function setConfig(configs) {
-	index.shallowMerge(config, configs.config || {})
-	index.shallowMerge(props, configs.props || {})
-	index.shallowMerge(color, configs.color || {})
-	index.shallowMerge(zIndex, configs.zIndex || {})
+    const settings = configs || {}
+	index.shallowMerge(config, settings.config || {})
+	index.shallowMerge(props, settings.props || {})
+	index.shallowMerge(color, settings.color || {})
+	index.shallowMerge(zIndex, settings.zIndex || {})
+    syncThemeColorOverrideState({
+        color: settings.color,
+        configColor: settings?.config?.color
+    })
+    const shouldRefreshTheme = !!settings.color
+        || !!settings?.config?.color
+        || themeState.version > 0
+    if (shouldRefreshTheme) {
+        refreshThemeFromConfig()
+    }
 }
 index.setConfig = setConfig
 
@@ -85,11 +185,59 @@ const $u = {
     // props,
     ...index,
     color,
-    platform
+    platform,
+    theme: themeState,
+    setTheme,
+    setThemePreference,
+    getThemePreference,
+    getSystemTheme,
+    getThemeVars,
+    getThemeTabBarStyle,
+    applyNativeThemeUI,
+    rootToast,
+    setRootToastRef,
+    rootNotify,
+    setRootNotifyRef
 }
 
 export const mount$u = function() {
     uni.$u = $u
+    initThemeSystem()
+}
+
+function defineGlobalThemeHelpers(Vue) {
+    const globalProperties = Vue?.config?.globalProperties
+    if (!globalProperties) return
+    Object.defineProperty(globalProperties, 'upThemeIsDark', {
+        configurable: true,
+        get() {
+            return getThemeIsDark()
+        }
+    })
+    Object.defineProperty(globalProperties, 'upThemeVars', {
+        configurable: true,
+        get() {
+            return getThemeVarsForStyle()
+        }
+    })
+    Object.defineProperty(globalProperties, 'upThemePageStyle', {
+        configurable: true,
+        get() {
+            return getThemePageStyle()
+        }
+    })
+    Object.defineProperty(globalProperties, 'upThemeCardStyle', {
+        configurable: true,
+        get() {
+            return getThemeCardStyle()
+        }
+    })
+    globalProperties.upThemeVar = function(varName, fallbackColor) {
+        return getThemeVar(varName, fallbackColor)
+    }
+    globalProperties.upApplyNativeThemeUI = function() {
+        return applyNativeThemeUI()
+    }
 }
 
 function toCamelCase(str) {
@@ -100,27 +248,27 @@ function toCamelCase(str) {
     });
 }
 
-// #ifdef APP || H5
-const importFn = import.meta.glob('./components/u-*/u-*.vue', { eager: true })
-let components = [];
-
-// 批量注册全局组件
-for (const key in importFn) {
-    let component = importFn[key].default;
-    if (component.name && component.name.indexOf('u--') !== 0) {
-        component.install = function (Vue) {
-            Vue.component(name, component);
-        };
-        
-        // 导入组件
-        components.push(component);
+let components = []
+
+function resolveComponents() {
+    if (components.length) return components
+    // #ifdef H5
+    const canUseGlob = typeof import.meta !== 'undefined' && typeof import.meta.glob === 'function'
+    if (!canUseGlob) return components
+    const importFn = import.meta.glob('./components/u-*/u-*.vue', { eager: true })
+    for (const key in importFn) {
+        const component = importFn[key]?.default
+        if (component?.name && component.name.indexOf('u--') !== 0) {
+            components.push(component)
+        }
     }
+    // #endif
+    return components
 }
-// #endif
 
 const install = (Vue, upuiParams = '') => {
-    // #ifdef APP || H5
-    components.forEach(function(component) {
+    // #ifdef H5
+    resolveComponents().forEach(function(component) {
         const name = component.name.replace(/u-([a-zA-Z0-9-_]+)/g, 'up-$1');
 		if (name != component.name) {
 			Vue.component(component.name, component); 
@@ -144,12 +292,15 @@ const install = (Vue, upuiParams = '') => {
     // 同时挂载到uni和Vue.prototype中
     // $u挂载到uni对象上
     uni.$u = $u
+    initThemeSystem()
 
-    // #ifndef APP-NVUE
-    // 只有vue，挂载到Vue.prototype才有意义，因为nvue中全局Vue.prototype和Vue.mixin是无效的
-    Vue.config.globalProperties.$u = $u
-    Vue.mixin(mixin)
-    // #endif
+    if (Vue && Vue.config && Vue.config.globalProperties) {
+        Vue.config.globalProperties.$u = $u
+        defineGlobalThemeHelpers(Vue)
+    }
+    if (Vue && typeof Vue.mixin === 'function') {
+        Vue.mixin(mixin)
+    }
 }
 
 export default {

package/index.scss

@@ -1,3 +1,7 @@
+/* #ifndef APP-NVUE */
+@import "./libs/css/theme-vars.scss";
+/* #endif */
+
 // 引入公共基础类
 @import "./libs/css/common.scss";
 @import "./libs/css/components.scss";
@@ -22,4 +26,4 @@
 // H5特有的样式
 /* #ifdef H5 */
 @import "./libs/css/h5.scss";
-/* #endif */
+/* #endif */

package/libs/config/color.js

@@ -1,4 +1,3 @@
-// 为了让用户能够自定义主题，会逐步弃用此文件，各颜色通过css提供
 // 为了给某些特殊场景使用和向后兼容，无需删除此文件(2020-06-20)
 const color = {
     primary: '#3c9cff',
@@ -14,4 +13,4 @@ const color = {
     borderColor: '#e4e7ed'
 }
 
-export default color
+export default color

package/libs/config/props.js

@@ -202,7 +202,7 @@ function setConfig(configs) {
 }
 
 // 初始化自定义配置
-if (uni && uni.upuiParams) {
+if (typeof uni !== 'undefined' && uni && uni.upuiParams) {
 	console.log('setting uview-plus')
 	let temp = uni.upuiParams()
 	if (temp.httpIns) {

package/libs/css/theme-vars-core.scss

@@ -0,0 +1,197 @@
+:root,
+page,
+body {
+	--up-main-color: var(--up-light-main-color, #303133);
+	--up-content-color: var(--up-light-content-color, #606266);
+	--up-tips-color: var(--up-light-tips-color, #909193);
+	--up-light-color: var(--up-light-light-color, #c0c4cc);
+	--up-border-color: var(--up-light-border-color, #dadbde);
+	--up-bg-color: var(--up-light-bg-color, #f3f4f6);
+	--up-hover-bg-color: #e7ebf0;
+	--up-page-bg-color: #f3f4f6;
+	--up-card-bg-color: #ffffff;
+	--up-disabled-color: var(--up-light-disabled-color, #c8c9cc);
+
+	--up-primary: var(--up-light-primary, #3c9cff);
+	--up-primary-dark: var(--up-light-primary-dark, #398ade);
+	--up-primary-disabled: var(--up-light-primary-disabled, #9acafc);
+	--up-primary-light: var(--up-light-primary-light, #ecf5ff);
+
+	--up-warning: var(--up-light-warning, #f9ae3d);
+	--up-warning-dark: var(--up-light-warning-dark, #f1a532);
+	--up-warning-disabled: var(--up-light-warning-disabled, #f9d39b);
+	--up-warning-light: var(--up-light-warning-light, #fdf6ec);
+
+	--up-success: var(--up-light-success, #5ac725);
+	--up-success-dark: var(--up-light-success-dark, #53c21d);
+	--up-success-disabled: var(--up-light-success-disabled, #a9e08f);
+	--up-success-light: var(--up-light-success-light, #f5fff0);
+
+	--up-error: var(--up-light-error, #f56c6c);
+	--up-error-dark: var(--up-light-error-dark, #e45656);
+	--up-error-disabled: var(--up-light-error-disabled, #f7b2b2);
+	--up-error-light: var(--up-light-error-light, #fef0f0);
+
+	--up-info: var(--up-light-info, #909399);
+	--up-info-dark: var(--up-light-info-dark, #767a82);
+	--up-info-disabled: var(--up-light-info-disabled, #c4c6c9);
+	--up-info-light: var(--up-light-info-light, #f4f4f5);
+
+	--up-table2-header-bg-color: #f5f7fa;
+	--up-table2-zebra-bg-color: #fafafa;
+	--up-table2-highlight-bg-color: #f5f7fa;
+	--up-gap-bg-color: #f3f4f6;
+	--up-skeleton-bg-color: #f1f2f4;
+	--up-skeleton-shimmer-color: #e6e6e6;
+	--up-swipe-action-button-bg-color: #c7c6cd;
+	--up-index-list-indicator-bg-color: #c9c9c9;
+	--up-calendar-month-mark-color: rgba(231, 232, 234, 0.83);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root,
+	page,
+	body {
+		--up-main-color: #f5f5f5;
+		--up-content-color: #d1d5db;
+		--up-tips-color: #9ca3af;
+		--up-light-color: #6b7280;
+		--up-border-color: #3a3a3c;
+		--up-bg-color: #1f1f1f;
+		--up-hover-bg-color: #343741;
+		--up-page-bg-color: #1f1f1f;
+		--up-card-bg-color: #1c1c1e;
+		--up-disabled-color: #4b5563;
+
+		--up-primary: #3c9cff;
+		--up-primary-dark: #5aa8ff;
+		--up-primary-disabled: #4c6f92;
+		--up-primary-light: #10243a;
+
+		--up-warning: #f9ae3d;
+		--up-warning-dark: #ffbf66;
+		--up-warning-disabled: #8a6a3a;
+		--up-warning-light: #3d2f1b;
+
+		--up-success: #5ac725;
+		--up-success-dark: #7ad94b;
+		--up-success-disabled: #5f7f4f;
+		--up-success-light: #1f3316;
+
+		--up-error: #f56c6c;
+		--up-error-dark: #ff8a8a;
+		--up-error-disabled: #8d5858;
+		--up-error-light: #3a2222;
+
+		--up-info: #909399;
+		--up-info-dark: #b0b3b8;
+		--up-info-disabled: #5f6368;
+		--up-info-light: #2f3238;
+
+		--up-table2-header-bg-color: #2a2d33;
+		--up-table2-zebra-bg-color: #23262b;
+		--up-table2-highlight-bg-color: #2f3440;
+		--up-gap-bg-color: #111111;
+		--up-skeleton-bg-color: #2f3135;
+		--up-skeleton-shimmer-color: rgba(255, 255, 255, 0.12);
+		--up-swipe-action-button-bg-color: #4b5563;
+		--up-index-list-indicator-bg-color: #4b5563;
+		--up-calendar-month-mark-color: rgba(255, 255, 255, 0.04);
+	}
+}
+
+[data-up-theme='light'] {
+	--up-main-color: var(--up-light-main-color, #303133);
+	--up-content-color: var(--up-light-content-color, #606266);
+	--up-tips-color: var(--up-light-tips-color, #909193);
+	--up-light-color: var(--up-light-light-color, #c0c4cc);
+	--up-border-color: var(--up-light-border-color, #dadbde);
+	--up-bg-color: var(--up-light-bg-color, #f3f4f6);
+	--up-hover-bg-color: #e7ebf0;
+	--up-page-bg-color: #f3f4f6;
+	--up-card-bg-color: #ffffff;
+	--up-disabled-color: var(--up-light-disabled-color, #c8c9cc);
+
+	--up-primary: var(--up-light-primary, #3c9cff);
+	--up-primary-dark: var(--up-light-primary-dark, #398ade);
+	--up-primary-disabled: var(--up-light-primary-disabled, #9acafc);
+	--up-primary-light: var(--up-light-primary-light, #ecf5ff);
+
+	--up-warning: var(--up-light-warning, #f9ae3d);
+	--up-warning-dark: var(--up-light-warning-dark, #f1a532);
+	--up-warning-disabled: var(--up-light-warning-disabled, #f9d39b);
+	--up-warning-light: var(--up-light-warning-light, #fdf6ec);
+
+	--up-success: var(--up-light-success, #5ac725);
+	--up-success-dark: var(--up-light-success-dark, #53c21d);
+	--up-success-disabled: var(--up-light-success-disabled, #a9e08f);
+	--up-success-light: var(--up-light-success-light, #f5fff0);
+
+	--up-error: var(--up-light-error, #f56c6c);
+	--up-error-dark: var(--up-light-error-dark, #e45656);
+	--up-error-disabled: var(--up-light-error-disabled, #f7b2b2);
+	--up-error-light: var(--up-light-error-light, #fef0f0);
+
+	--up-info: var(--up-light-info, #909399);
+	--up-info-dark: var(--up-light-info-dark, #767a82);
+	--up-info-disabled: var(--up-light-info-disabled, #c4c6c9);
+	--up-info-light: var(--up-light-info-light, #f4f4f5);
+
+	--up-table2-header-bg-color: #f5f7fa;
+	--up-table2-zebra-bg-color: #fafafa;
+	--up-table2-highlight-bg-color: #f5f7fa;
+	--up-gap-bg-color: #f3f4f6;
+	--up-skeleton-bg-color: #f1f2f4;
+	--up-skeleton-shimmer-color: #e6e6e6;
+	--up-swipe-action-button-bg-color: #c7c6cd;
+	--up-index-list-indicator-bg-color: #c9c9c9;
+	--up-calendar-month-mark-color: rgba(231, 232, 234, 0.83);
+}
+
+[data-up-theme='dark'] {
+	--up-main-color: #f5f5f5;
+	--up-content-color: #d1d5db;
+	--up-tips-color: #9ca3af;
+	--up-light-color: #6b7280;
+	--up-border-color: #3a3a3c;
+	--up-bg-color: #1f1f1f;
+	--up-hover-bg-color: #343741;
+	--up-page-bg-color: #1f1f1f;
+	--up-card-bg-color: #1c1c1e;
+	--up-disabled-color: #4b5563;
+
+	--up-primary: #3c9cff;
+	--up-primary-dark: #5aa8ff;
+	--up-primary-disabled: #4c6f92;
+	--up-primary-light: #10243a;
+
+	--up-warning: #f9ae3d;
+	--up-warning-dark: #ffbf66;
+	--up-warning-disabled: #8a6a3a;
+	--up-warning-light: #3d2f1b;
+
+	--up-success: #5ac725;
+	--up-success-dark: #7ad94b;
+	--up-success-disabled: #5f7f4f;
+	--up-success-light: #1f3316;
+
+	--up-error: #f56c6c;
+	--up-error-dark: #ff8a8a;
+	--up-error-disabled: #8d5858;
+	--up-error-light: #3a2222;
+
+	--up-info: #909399;
+	--up-info-dark: #b0b3b8;
+	--up-info-disabled: #5f6368;
+	--up-info-light: #2f3238;
+
+	--up-table2-header-bg-color: #2a2d33;
+	--up-table2-zebra-bg-color: #23262b;
+	--up-table2-highlight-bg-color: #2f3440;
+	--up-gap-bg-color: #111111;
+	--up-skeleton-bg-color: #2f3135;
+	--up-skeleton-shimmer-color: rgba(255, 255, 255, 0.12);
+	--up-swipe-action-button-bg-color: #4b5563;
+	--up-index-list-indicator-bg-color: #4b5563;
+	--up-calendar-month-mark-color: rgba(255, 255, 255, 0.04);
+}

package/libs/css/theme-vars.scss

@@ -0,0 +1 @@
+@import "./theme-vars-core.scss";

package/libs/function/index.js

@@ -1,10 +1,10 @@
-import {
-	number as testNumber,
-	array as testArray,
-	empty as testEmpty
-} from './test'
-import { round } from './digit.js'
-import config from '../config/config';
+import {
+	number as testNumber,
+	array as testArray,
+	empty as testEmpty
+} from './test.js'
+import { round } from './digit.js'
+import config from '../config/config.js'
 /**
  * @description 如果value小于min，取min；如果value大于max，取max
  * @param {number} min 

package/libs/mixin/mixin.js

@@ -2,9 +2,21 @@ import { defineMixin } from '../vue'
 import { deepMerge, $parent, sleep } from '../function/index'
 import test from '../function/test'
 import route from '../util/route'
+import {
+    applyNativeThemeUI,
+    applyNativeThemeUIDeferred,
+    getThemeCardStyle,
+    getThemeIsDark,
+    getThemePageStyle,
+    getThemeVar,
+    getThemeVarsForStyle,
+    syncThemeRuntimeFromStorage
+} from '../theme/runtime'
 // #ifdef APP-NVUE
 // 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
-const dom = uni.requireNativePlugin('dom')
+const dom = (typeof uni !== 'undefined' && uni && typeof uni.requireNativePlugin === 'function')
+    ? uni.requireNativePlugin('dom')
+    : null
 // #endif
 
 export const mixin = defineMixin({
@@ -31,21 +43,51 @@ export const mixin = defineMixin({
         }
     },
     data() {
-        return {}
+        return {
+            __upPageThemeChangeHandler: null,
+            upThemeVersion: 0
+        }
     },
     onLoad() {
         // getRect挂载到$u上，因为这方法需要使用in(this)，所以无法把它独立成一个单独的文件导出
-        this.$u.getRect = this.$uGetRect
+        this.upBindGetRect()
+        this.upInitThemeVersion()
+        if (this.upIsPageScope()) {
+            this.upApplyNativeThemeUI()
+            if (typeof uni !== 'undefined' && typeof uni.$on === 'function' && !this.__upPageThemeChangeHandler) {
+                this.__upPageThemeChangeHandler = () => {
+                    this.upApplyNativeThemeUI()
+                }
+                uni.$on('uThemeChange', this.__upPageThemeChangeHandler)
+            }
+        }
+    },
+    onShow() {
+        if (this.upIsPageScope()) {
+            this.upApplyNativeThemeUI()
+        }
     },
     created() {
         // 组件当中，只有created声明周期，为了能在组件使用，故也在created中将方法挂载到$u
-        this.$u.getRect = this.$uGetRect
+        this.upBindGetRect()
+        this.upInitThemeVersion()
+        if (typeof uni !== 'undefined' && typeof uni.$on === 'function') {
+            this.__uThemeChangeHandler = (payload = {}) => {
+                this.upSyncThemeVersion(payload)
+                this.chacheU = null
+                if (typeof this.$forceUpdate === 'function') {
+                    this.$forceUpdate()
+                }
+            }
+            uni.$on('uThemeChange', this.__uThemeChangeHandler)
+        }
     },
     computed: {
         // 在2.x版本中，将会把$u挂载到uni对象下，导致在模板中无法使用uni.$u.xxx形式
         // 所以这里通过computed计算属性将其附加到this.$u上，就可以在模板或者js中使用uni.$u.xxx
         // 只在nvue环境通过此方式引入完整的$u，其他平台会出现性能问题，非nvue则按需引入（主要原因是props过大）
         $u() {
+            this.upThemeVersion
             // #ifndef APP-NVUE
             // 在非nvue端，移除props，http，mixin等对象，避免在小程序setData时数据过大影响性能
             let mergeU = deepMerge(uni.$u, {
@@ -63,6 +105,22 @@ export const mixin = defineMixin({
             return uni.$u
             // #endif
         },
+        upThemeIsDark() {
+            this.upThemeVersion
+            return getThemeIsDark(this.$u)
+        },
+        upThemeVars() {
+            this.upThemeVersion
+            return getThemeVarsForStyle(this.$u)
+        },
+        upThemePageStyle() {
+            this.upThemeVersion
+            return getThemePageStyle(this.$u)
+        },
+        upThemeCardStyle() {
+            this.upThemeVersion
+            return getThemeCardStyle(this.$u)
+        },
         /**
          * 生成bem规则类名
          * 由于微信小程序，H5，nvue之间绑定class的差异，无法通过:class="[bem()]"的形式进行同用
@@ -98,6 +156,47 @@ export const mixin = defineMixin({
         }
     },
     methods: {
+        upBindGetRect() {
+            const upU = this.$u || (typeof uni !== 'undefined' ? uni.$u : null)
+            if (upU) {
+                upU.getRect = this.$uGetRect
+            } else if (typeof uni !== 'undefined') {
+                uni.$u = {
+                    getRect: this.$uGetRect
+                }
+            }
+        },
+        upReadThemeVersion() {
+            return Number((typeof uni !== 'undefined' && uni.$u && uni.$u.theme && uni.$u.theme.version) || 0)
+        },
+        upInitThemeVersion() {
+            const version = this.upReadThemeVersion()
+            if (version) {
+                this.upThemeVersion = version
+            }
+        },
+        upSyncThemeVersion(payload = {}) {
+            const version = Number(payload.version || this.upReadThemeVersion() || 0)
+            this.upThemeVersion = version || Number(this.upThemeVersion || 0) + 1
+        },
+        upIsPageScope() {
+            return !!(this.$page || this.route || this.$options?.mpType === 'page')
+        },
+        upHasProp(propName) {
+            const vnodeProps = this.$?.vnode?.props || {}
+            const kebabName = propName.replace(/[A-Z]/g, (s) => `-${s.toLowerCase()}`)
+            return Object.prototype.hasOwnProperty.call(vnodeProps, propName)
+                || Object.prototype.hasOwnProperty.call(vnodeProps, kebabName)
+        },
+        upThemeVar(varName, fallbackColor) {
+            this.upThemeVersion
+            return getThemeVar(varName, fallbackColor, this.$u)
+        },
+        upApplyNativeThemeUI() {
+            syncThemeRuntimeFromStorage(this.$u)
+            this.upSyncThemeVersion()
+            applyNativeThemeUIDeferred(this.$u)
+        },
         // 跳转某一个页面
         openPage(urlKey = 'url') {
             const url = this[urlKey]
@@ -200,6 +299,14 @@ export const mixin = defineMixin({
                 }
             })
         }
+        if (typeof uni !== 'undefined' && typeof uni.$off === 'function' && this.__uThemeChangeHandler) {
+            uni.$off('uThemeChange', this.__uThemeChangeHandler)
+            this.__uThemeChangeHandler = null
+        }
+        if (typeof uni !== 'undefined' && typeof uni.$off === 'function' && this.__upPageThemeChangeHandler) {
+            uni.$off('uThemeChange', this.__upPageThemeChangeHandler)
+            this.__upPageThemeChangeHandler = null
+        }
     }
 })