uview-plus 3.7.32 → 3.8.18

package/components/u-keyboard/u-keyboard.vue

@@ -8,9 +8,7 @@
 	    :safeAreaInsetBottom="safeAreaInsetBottom"
 	    @close="popupClose"
 	    :zIndex="zIndex"
-	    :customStyle="{
-			backgroundColor: 'rgb(214, 218, 220)'
-		}"
+	    :customStyle="popupStyle"
 	>
 		<view class="u-keyboard">
 			<slot />
@@ -106,6 +104,13 @@
 			}
 		},
 		mixins: [mpMixin, mixin, props],
+		computed: {
+			popupStyle() {
+				return {
+					backgroundColor: this.upThemeVar('--up-bg-color', this.upThemeIsDark ? '#2c2c2e' : 'rgb(214, 218, 220)')
+				}
+			}
+		},
 		emits: ["change", "close", "confirm", "cancel", "backspace"],
 		methods: {
 			change(e) {
@@ -138,11 +143,11 @@
 		&__tooltip {
 			@include flex;
 			justify-content: space-between;
-			background-color: #FFFFFF;
+			background-color: var(--up-card-bg-color, #ffffff);
 			padding: 14px 12px;
 
 			&__item {
-				color: #333333;
+				color: var(--up-main-color, #303133);
 				flex: 1;
 				text-align: center;
 				font-size: 15px;
@@ -155,7 +160,7 @@
 
 			&__cancel {
 				text-align: left;
-				color: #888888;
+				color: var(--up-tips-color, #909399);
 			}
 
 			&__tips {

package/components/u-loading-page/loadingPage.js

@@ -15,7 +15,7 @@ export default {
         image: '',
         loadingMode: 'circle',
         loading: false,
-        bgColor: '#ffffff',
+        bgColor: '',
         color: '#C8C8C8',
         fontSize: 19,
         iconSize: 28,

package/components/u-loading-page/u-loading-page.vue

@@ -1,17 +1,7 @@
 <template>
     <u-transition
         :show="loading"
-        :custom-style="{
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: bgColor,
-            display: 'flex',
-            zIndex: zIndex,
-            ...customStyle
-        }"
+        :custom-style="overlayStyle"
     >
         <view class="u-loading-page">
             <view class="u-loading-page__warpper">
@@ -61,7 +51,7 @@ import { addUnit } from '../../libs/function/index';
  * @property {String}			image			文字上方用于替换loading动画的图片
  * @property {String}			loadingMode		加载动画的模式，circle-圆形，spinner-花朵形，semicircle-半圆形 （默认 'circle' ）
  * @property {Boolean}			loading			是否加载中 （默认 false ）
- * @property {String}			bgColor			背景色 （默认 '#ffffff' ）
+ * @property {String}			bgColor			背景色，留空时跟随主题页面背景
  * @property {String}			color			文字颜色 （默认 '#C8C8C8' ）
  * @property {String | Number}	fontSize		文字大小 （默认 19 ）
  * @property {String | Number}	iconSize		图标大小 （默认 28 ）
@@ -73,6 +63,22 @@ import { addUnit } from '../../libs/function/index';
 export default {
     name: "u-loading-page",
     mixins: [mpMixin, mixin, props],
+    computed: {
+        overlayStyle() {
+            const fallbackBg = this.$u?.color?.bgColor || (this.upThemeIsDark ? '#1f1f1f' : '#f3f4f6')
+            return {
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: this.bgColor || this.upThemeVar('--up-page-bg-color', fallbackBg),
+                display: 'flex',
+                zIndex: this.zIndex,
+                ...this.customStyle
+            }
+        }
+    },
     data() {
         return {};
     },

package/components/u-navbar/navbar.js

@@ -7,7 +7,6 @@
  * @lastTime     : 2025-12-19 08:55:21
  * @FilePath     : /uview-plus/libs/config/props/navbar.js
  */
-import color from '../../libs/config/color'
 export default {
     // navbar 组件
     navbar: {
@@ -21,11 +20,11 @@ export default {
         rightIcon: '',
         title: '',
         titleColor: '',
-        bgColor: '#ffffff',
+        bgColor: '',
         titleWidth: '400rpx',
         height: '44px',
 		leftIconSize: 20,
-		leftIconColor: color.mainColor,
+		leftIconColor: '',
 		autoBack: false,
 		titleStyle: ''
     }

package/components/u-navbar/theme-vars.scss

@@ -0,0 +1,21 @@
+:root,
+page,
+body {
+	--up-navbar-bg-color: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root,
+	page,
+	body {
+		--up-navbar-bg-color: #1c1c1e;
+	}
+}
+
+[data-up-theme='light'] {
+	--up-navbar-bg-color: #ffffff;
+}
+
+[data-up-theme='dark'] {
+	--up-navbar-bg-color: #1c1c1e;
+}

package/components/u-navbar/u-navbar.vue

@@ -10,14 +10,14 @@
 		<view :class="[fixed && 'u-navbar--fixed']">
 			<u-status-bar
 				v-if="safeAreaInsetTop"
-				:bgColor="statusBarBgColor ? statusBarBgColor : bgColor"
+				:bgColor="statusBarBgColor ? statusBarBgColor : navbarBgColor"
 			></u-status-bar>
 			<view
 				class="u-navbar__content"
 				:class="[border && 'u-border-bottom']"
 				:style="{
 					height: addUnit(height),
-					backgroundColor: bgColor,
+					backgroundColor: navbarBgColor,
 				}"
 			>
 				<view
@@ -31,12 +31,12 @@
 							v-if="leftIcon"
 							:name="leftIcon"
 							:size="leftIconSize"
-							:color="leftIconColor"
+							:color="navbarLeftIconColor"
 						></up-icon>
 						<text
 							v-if="leftText"
 							:style="{
-								color: leftIconColor
+								color: navbarLeftIconColor
 							}"
 							class="u-navbar__content__left__text"
 						>{{ leftText }}</text>
@@ -47,7 +47,7 @@
 						class="u-line-1 u-navbar__content__title"
 						:style="[{
 							width: addUnit(titleWidth),
-							color: titleColor,
+							color: navbarTitleColor,
 						}, addStyle(titleStyle)]"
 					>{{ title }}</text>
 				</slot>
@@ -61,10 +61,12 @@
 							v-if="rightIcon"
 							:name="rightIcon"
 							size="20"
+							:color="navbarRightColor"
 						></up-icon>
 						<text
 							v-if="rightText"
 							class="u-navbar__content__right__text"
+							:style="{ color: navbarRightColor }"
 						>{{ rightText }}</text>
 					</slot>
 				</view>
@@ -112,6 +114,23 @@
 			return {
 			}
 		},
+		computed: {
+			navbarBgColor() {
+				if (this.bgColor) return this.bgColor
+				return this.upThemeVar('--up-navbar-bg-color', this.upThemeIsDark ? '#1c1c1e' : '#ffffff')
+			},
+			navbarTitleColor() {
+				if (this.titleColor) return this.titleColor
+				return this.upThemeVar('--up-main-color', this.$u.color.mainColor)
+			},
+			navbarLeftIconColor() {
+				if (this.leftIconColor) return this.leftIconColor
+				return this.upThemeVar('--up-main-color', this.$u.color.mainColor)
+			},
+			navbarRightColor() {
+				return this.upThemeVar('--up-main-color', this.$u.color.mainColor)
+			}
+		},
 		emits: ["leftClick", "rightClick"],
 		methods: {
 			addStyle,
@@ -138,6 +157,10 @@
 	}
 </script>
 
+<style lang="scss">
+	@import "./theme-vars.scss";
+</style>
+
 <style lang="scss" scoped>
 
 	.u-navbar {
@@ -154,7 +177,7 @@
 			@include flex(row);
 			align-items: center;
 			height: 44px;
-			background-color: #9acafc;
+			background-color: $u-bg-color;
 			position: relative;
 			justify-content: center;
 
@@ -178,6 +201,7 @@
 				&__text {
 					font-size: 15px;
 					margin-left: 3px;
+					color: $u-main-color;
 				}
 			}
 

package/components/u-notice-bar/theme-vars.scss

@@ -0,0 +1,25 @@
+:root,
+page,
+body {
+	--up-notice-bar-color: #f9ae3d;
+	--up-notice-bar-bg-color: #fdf6ec;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root,
+	page,
+	body {
+		--up-notice-bar-color: #f9ae3d;
+		--up-notice-bar-bg-color: #3d2f1b;
+	}
+}
+
+[data-up-theme='light'] {
+	--up-notice-bar-color: #f9ae3d;
+	--up-notice-bar-bg-color: #fdf6ec;
+}
+
+[data-up-theme='dark'] {
+	--up-notice-bar-color: #f9ae3d;
+	--up-notice-bar-bg-color: #3d2f1b;
+}

package/components/u-notice-bar/u-notice-bar.vue

@@ -3,13 +3,13 @@
 		class="u-notice-bar"
 		v-if="show"
 		:style="[{
-			backgroundColor: bgColor
+			backgroundColor: resolvedBgColor
 		}, addStyle(customStyle)]"
 	>
 		<template v-if="direction === 'column' || (direction === 'row' && step)">
 			<u-column-notice
-				:color="color"
-				:bgColor="bgColor"
+				:color="resolvedColor"
+				:bgColor="resolvedBgColor"
 				:text="text"
 				:mode="mode"
 				:step="step"
@@ -24,8 +24,8 @@
 		</template>
 		<template v-else>
 			<u-row-notice
-				:color="color"
-				:bgColor="bgColor"
+				:color="resolvedColor"
+				:bgColor="resolvedBgColor"
 				:text="text"
 				:mode="mode"
 				:fontSize="fontSize"
@@ -43,6 +43,7 @@
 	import { props } from './props';
 	import { mpMixin } from '../../libs/mixin/mpMixin';
 	import { mixin } from '../../libs/mixin/mixin';
+	import defProps from '../../libs/config/props.js';
 	import { addStyle } from '../../libs/function/index';
 	/**
 	 * noticeBar 滚动通知
@@ -75,6 +76,20 @@
 				show: true
 			}
 		},
+		computed: {
+			resolvedColor() {
+				if (this.upHasProp('color') || this.color !== defProps.noticeBar.color) {
+					return this.color
+				}
+				return this.upThemeVar('--up-notice-bar-color', this.$u.color.warning || '#f9ae3d')
+			},
+			resolvedBgColor() {
+				if (this.upHasProp('bgColor') || this.bgColor !== defProps.noticeBar.bgColor) {
+					return this.bgColor
+				}
+				return this.upThemeVar('--up-notice-bar-bg-color', this.$u.color.warningLight || '#fdf6ec')
+			}
+		},
 		emits: ["click", "close"],
 		methods: {
 			addStyle,
@@ -95,6 +110,10 @@
 	};
 </script>
 
+<style lang="scss">
+	@import "./theme-vars.scss";
+</style>
+
 <style lang="scss" scoped>
 
 	.u-notice-bar {

package/components/u-number-box/numberBox.js

@@ -24,13 +24,13 @@ export default {
         showPlus: true,
         decimalLength: null,
         longPress: true,
-        color: '#323233',
+        color: '',
         buttonWidth: 30,
         buttonSize: 30,
         buttonRadius: '0px',
-        bgColor: '#EBECEE',
-        disabledBgColor: '#f7f8fa',
-        inputBgColor: '#EBECEE',
+        bgColor: '',
+        disabledBgColor: '',
+        inputBgColor: '',
         cursorSpacing: 100,
         disableMinus: false,
         disablePlus: false,

package/components/u-number-box/u-number-box.vue

@@ -22,7 +22,7 @@
 		>
 			<up-icon
 			    name="minus"
-			    :color="isDisabled('minus') ? '#c8c9cc' : '#323233'"
+			    :color="isDisabled('minus') ? resolvedDisabledIconColor : resolvedColor"
 			    size="15"
 			    bold
 				:customStyle="iconStyle"
@@ -83,7 +83,7 @@
 		>
 			<up-icon
 			    name="plus"
-			    :color="isDisabled('plus') ? '#c8c9cc' : '#323233'"
+			    :color="isDisabled('plus') ? resolvedDisabledIconColor : resolvedColor"
 			    size="15"
 			    bold
 				:customStyle="iconStyle"
@@ -166,6 +166,21 @@
 			// #endif
 		},
 		computed: {
+			resolvedColor() {
+				return this.color || this.upThemeVar('--up-main-color', '#303133')
+			},
+			resolvedDisabledIconColor() {
+				return this.upThemeVar('--up-disabled-color', '#c8c9cc')
+			},
+			resolvedBgColor() {
+				return this.bgColor || this.upThemeVar('--up-bg-color', '#EBECEE')
+			},
+			resolvedDisabledBgColor() {
+				return this.disabledBgColor || this.upThemeVar('--up-card-bg-color', '#f7f8fa')
+			},
+			resolvedInputBgColor() {
+				return this.inputBgColor || this.resolvedBgColor
+			},
 			hideMinus() {
 				return this.currentValue == 0 && this.miniMode == true
 			},
@@ -177,24 +192,23 @@
 			buttonStyle() {
 				return (type) => {
 					const style = {
-						backgroundColor: this.bgColor,
+						backgroundColor: this.resolvedBgColor,
 						width: addUnit(this.buttonWidth),
 						height: addUnit(this.buttonSize),
-						color: this.color,
+						color: this.resolvedColor,
 						borderRadius: this.buttonRadius
 					}
 					if (this.isDisabled(type)) {
-						style.backgroundColor = this.disabledBgColor
+						style.backgroundColor = this.resolvedDisabledBgColor
 					}
 					return style
 				}
 			},
 			// 输入框的样式
 			inputStyle() {
-				const disabled = this.disabled || this.disabledInput
 				const style = {
-					color: this.color,
-					backgroundColor: this.inputBgColor || this.bgColor,
+					color: this.resolvedColor,
+					backgroundColor: this.resolvedInputBgColor,
 					height: addUnit(this.buttonSize),
 					width: addUnit(this.inputWidth)
 				}
@@ -407,17 +421,17 @@
 </script>
 
 <style lang="scss" scoped>
-	$u-numberBox-hover-bgColor: #E6E6E6 !default;
-	$u-numberBox-disabled-color: #c8c9cc !default;
-	$u-numberBox-disabled-bgColor: #f7f8fa !default;
+	$u-numberBox-hover-bgColor: var(--up-border-color, #E6E6E6) !default;
+	$u-numberBox-disabled-color: var(--up-disabled-color, #c8c9cc) !default;
+	$u-numberBox-disabled-bgColor: var(--up-card-bg-color, #f7f8fa) !default;
 	$u-numberBox-plus-radius: 4px !default;
 	$u-numberBox-minus-radius: 4px !default;
 	$u-numberBox-input-text-align: center !default;
 	$u-numberBox-input-font-size: 15px !default;
 	$u-numberBox-input-padding: 0 !default;
 	$u-numberBox-input-margin: 0 2px !default;
-	$u-numberBox-input-disabled-color: #c8c9cc !default;
-	$u-numberBox-input-disabled-bgColor: #f2f3f5 !default;
+	$u-numberBox-input-disabled-color: var(--up-disabled-color, #c8c9cc) !default;
+	$u-numberBox-input-disabled-bgColor: var(--up-bg-color, #f2f3f5) !default;
 
 	.u-number-box {
 		@include flex(row);

package/components/u-number-keyboard/u-number-keyboard.vue

@@ -30,7 +30,7 @@
 			>
 				<up-icon
 					name="backspace"
-					color="#303133"
+					:color="upThemeVar('--up-main-color', '#303133')"
 					size="28"
 				></up-icon>
 			</view>
@@ -134,7 +134,7 @@
 </script>
 
 <style lang="scss" scoped>
-	$u-number-keyboard-background-color:rgb(224, 228, 230) !default;
+	$u-number-keyboard-background-color:var(--up-bg-color, rgb(224, 228, 230)) !default;
 	$u-number-keyboard-padding:8px 10rpx 8px 10rpx !default;
 	$u-number-keyboard-button-width:222rpx !default;
 	$u-number-keyboard-button-margin:4px 6rpx !default;
@@ -143,13 +143,13 @@
 	$u-number-keyboard-button-border-bottom-left-radius:4px !default;
 	$u-number-keyboard-button-border-bottom-right-radius:4px !default;
 	$u-number-keyboard-button-height: 90rpx!default;
-	$u-number-keyboard-button-background-color:#FFFFFF !default;
+	$u-number-keyboard-button-background-color:var(--up-card-bg-color, #ffffff) !default;
 	$u-number-keyboard-button-box-shadow:0 2px 0px #BBBCBE !default;
 	$u-number-keyboard-text-font-size:20px !default;
 	$u-number-keyboard-text-font-weight:500 !default;
-	$u-number-keyboard-text-color:$u-main-color !default;
-	$u-number-keyboard-gray-background-color:rgb(200, 202, 210) !default;
-	$u-number-keyboard-u-hover-class-background-color: #BBBCC6 !default;
+	$u-number-keyboard-text-color:var(--up-main-color, #303133) !default;
+	$u-number-keyboard-gray-background-color:var(--up-border-color, rgb(200, 202, 210)) !default;
+	$u-number-keyboard-u-hover-class-background-color: var(--up-border-color, #BBBCC6) !default;
 
 	.u-keyboard {
 		@include flex;

package/components/u-picker/picker.js

@@ -1,43 +1,43 @@
-/*
- * @Author       : LQ
- * @Description  :
- * @version      : 3.0
- * @Date         : 2021-08-20 16:44:21
- * @LastAuthor   : jry
- * @lastTime     : 2025-12-19 08:55:21
- * @FilePath     : /uview-plus/libs/config/props/picker.js
- */
-import { t } from '../../libs/i18n';
-
-export default {
-    // picker
-    picker: {
-        show: false,
-        popupMode: 'bottom',
-        showToolbar: true,
-        title: '',
-        columns: [],
-        loading: false,
-        itemHeight: 44,
-        cancelText: t('up.common.cancel'),
-        confirmText: t('up.common.confirm'),
-        cancelColor: '#909193',
-        confirmColor: '',
-        visibleItemCount: 5,
-        keyName: 'text',
-        valueName: 'value',
-        closeOnClickOverlay: false,
-        defaultIndex: [],
-        immediateChange: true,
-        zIndex: 10076,
-        disabled: false,
-        disabledColor: '',
-        placeholder: t('up.common.pleaseChoose'),
-        inputProps: {},
-        bgColor: '#FFFFFF',
-        round: 0,
-        duration: 300,
-        overlayOpacity: 0.5,
-        pageInline: false
-    }
-};
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-12-19 08:55:21
+ * @FilePath     : /uview-plus/libs/config/props/picker.js
+ */
+import { t } from '../../libs/i18n';
+
+export default {
+    // picker
+    picker: {
+        show: false,
+        popupMode: 'bottom',
+        showToolbar: true,
+        title: '',
+        columns: [],
+        loading: false,
+        itemHeight: 44,
+        cancelText: t('up.common.cancel'),
+        confirmText: t('up.common.confirm'),
+        cancelColor: '#909193',
+        confirmColor: '',
+        visibleItemCount: 5,
+        keyName: 'text',
+        valueName: 'value',
+        closeOnClickOverlay: false,
+        defaultIndex: [],
+        immediateChange: true,
+        zIndex: 10076,
+        disabled: false,
+        disabledColor: '',
+        placeholder: t('up.common.pleaseChoose'),
+        inputProps: {},
+        bgColor: '',
+        round: 0,
+        duration: 300,
+        overlayOpacity: 0.5,
+        pageInline: false
+    }
+};

package/components/u-picker/u-picker.vue

@@ -44,7 +44,7 @@
 				<picker-view
 					class="u-picker__view"
 					:mask-class="maskClass"
-					:mask-style="maskStyle"
+					:mask-style="maskStyleInner"
 					:indicatorStyle="`height: ${addUnit(itemHeight, 'px')}`"
 					:value="innerIndex"
 					:immediateChange="immediateChange"
@@ -238,6 +238,18 @@ export default {
 				});
 			}
 			return res
+		},
+		maskStyleInner() {
+			// 显式传入时，始终以外部传参为准（即使传空字符串）
+			if (this.upHasProp('maskStyle')) {
+				return this.maskStyle || ''
+			}
+			if (this.upThemeIsDark) {
+				const topBottomStrong = 'rgba(28, 28, 30, 0.95)'
+				const topBottomWeak = 'rgba(28, 28, 30, 0.6)'
+				return `background-image: linear-gradient(180deg, ${topBottomStrong}, ${topBottomWeak}), linear-gradient(0deg, ${topBottomStrong}, ${topBottomWeak});`
+			}
+			return ''
 		}
     },
 	methods: {
@@ -471,7 +483,7 @@ export default {
 			@include flex;
 			justify-content: center;
 			align-items: center;
-			background-color: rgba(255, 255, 255, 0.87);
+			background-color: var(--up-card-bg-color, #ffffff);
 			z-index: 1000;
 		}
 	}

package/components/u-popup/popup.js

@@ -23,7 +23,7 @@ export default {
         closeIconPos: 'top-right',
         round: '20px',
         zoom: true,
-        bgColor: '#fff',
+        bgColor: '',
         overlayOpacity: 0.5,
         pageInline: false,
         touchable: false,