uview-pro 0.3.16 → 0.4.2

package/components/u-swipe-action/u-swipe-action.vue

@@ -57,7 +57,7 @@ import { SwipeActionProps } from './types';
  * swipeAction 左滑单元格
  * @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作。
  * @tutorial https://uviewpro.cn/zh/components/swipeAction.html
- * @property {String} bg-color 整个组件背景颜色（默认#ffffff）
+ * @property {String} bg-color 整个组件背景颜色（默认var(--u-bg-white)）
  * @property {Array} options 数组形式，可以配置背景颜色和文字
  * @property {String|Number} index 标识符，点击时候用于区分点击了哪一个，用v-for循环时的index即可
  * @property {String|Number} btn-width 按钮宽度，单位rpx（默认180）
@@ -264,7 +264,7 @@ function contentClick() {
 .u-swipe-del {
     position: relative;
     font-size: 30rpx;
-    color: #ffffff;
+    color: var(--u-white-color);
 }
 
 .u-btn-text {

package/components/u-swiper/types.ts

@@ -39,7 +39,7 @@ export const SwiperProps = {
     /** 轮播项对象的图片字段名 */
     name: { type: String, default: 'image' },
     /** 轮播背景色 */
-    bgColor: { type: String, default: '#f3f4f6' },
+    bgColor: { type: String, default: 'var(--u-bg-color)' },
     /** 当前激活项索引 */
     current: { type: [Number, String] as PropType<number | string>, default: 0 },
     /** 标题样式对象 */

package/components/u-swiper/u-swiper.vue

@@ -115,7 +115,7 @@ import { $u } from '../..';
  * @property {Boolean} autoplay 是否自动播放（默认true）
  * @property {String|Number} interval 自动轮播时间间隔，单位ms（默认2500）
  * @property {Boolean} circular 是否衔接播放，见官网说明（默认true）
- * @property {String} bg-color 背景颜色（默认#f3f4f6）
+ * @property {String} bg-color 背景颜色（默认var(--u-bg-color)）
  * @property {String|Number} border-radius 轮播图圆角值，单位rpx（默认8）
  * @property {Object} title-style 自定义标题样式
  * @property {String|Number} effect3d-previous-margin mode = true模式的情况下，激活项与前后项之间的距离，单位rpx（默认50）

package/components/u-switch/types.ts

@@ -17,7 +17,7 @@ export const SwitchProps = {
     /** 打开时的颜色 */
     activeColor: { type: String, default: () => getColor('primary') },
     /** 关闭时的颜色 */
-    inactiveColor: { type: String, default: '#ffffff' },
+    inactiveColor: { type: String, default: 'var(--u-white-color)' },
     /** v-model 绑定值，是否选中 */
     modelValue: { type: Boolean, default: false },
     /** 是否开启轻微震动反馈 */

package/components/u-switch/u-switch.vue

@@ -43,11 +43,11 @@ import { SwitchProps } from './types';
  * @property {Boolean} disabled 是否禁用（默认false）
  * @property {String|Number} size 开关尺寸，单位rpx（默认50）
  * @property {String} active-color 打开时的背景色（默认主题色primary）
- * @property {String} inactive-color 关闭时的背景色（默认#ffffff）
+ * @property {String} inactive-color 关闭时的背景色（默认var(--u-bg-white)）
  * @property {Boolean|Number|String} active-value 打开选择器时通过change事件发出的值（默认true）
  * @property {Boolean|Number|String} inactive-value 关闭选择器时通过change事件发出的值（默认false）
  * @event {Function} change 在switch打开或关闭时触发
- * @example <u-switch v-model="checked" active-color="red" inactive-color="#eee"></u-switch>
+ * @example <u-switch v-model="checked" active-color="red" inactive-color="var(--u-divider-color)"></u-switch>
  */
 const props = defineProps(SwitchProps);
 
@@ -96,7 +96,7 @@ function onClick() {
     box-sizing: initial;
     width: 2em;
     height: 1em;
-    background-color: #fff;
+    background-color: var(--u-bg-white);
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 1em;
     transition: background-color 0.3s;
@@ -112,8 +112,8 @@ function onClick() {
     left: 0;
     border-radius: 100%;
     z-index: 1;
-    background-color: #fff;
-    background-color: #fff;
+    background-color: var(--u-bg-white);
+    background-color: var(--u-bg-white);
     box-shadow:
         0 3px 1px 0 rgba(0, 0, 0, 0.05),
         0 2px 2px 0 rgba(0, 0, 0, 0.1),

package/components/u-tabbar/types.ts

@@ -1,5 +1,6 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import { baseProps } from '../common/props';
+import type { TabbarItem } from '../../types/global';
 
 /**
  * TabbarProps 底部导航栏 props 类型定义
@@ -12,7 +13,7 @@ export const TabbarProps = {
     /** v-model绑定当前激活项的值 */
     modelValue: { type: [String, Number] as PropType<string | number>, default: 0 },
     /** tabbar背景色 */
-    bgColor: { type: String, default: '#ffffff' },
+    bgColor: { type: String, default: 'var(--u-bg-white)' },
     /** tabbar高度，单位任意，数值默认rpx */
     height: { type: [String, Number] as PropType<string | number>, default: '50px' },
     /** 非凸起图标的大小，单位任意，数值默认rpx */
@@ -20,13 +21,13 @@ export const TabbarProps = {
     /** 凸起图标的大小，单位任意，数值默认rpx */
     midButtonSize: { type: [String, Number] as PropType<string | number>, default: 90 },
     /** 激活时的颜色 */
-    activeColor: { type: String, default: '#303133' },
+    activeColor: { type: String, default: 'var(--u-main-color)' },
     /** 未激活时的颜色 */
-    inactiveColor: { type: String, default: '#606266' },
+    inactiveColor: { type: String, default: 'var(--u-content-color)' },
     /** 是否显示中部凸起按钮 */
     midButton: { type: Boolean, default: false },
     /** tabbar配置项数组 */
-    list: { type: Array as PropType<any[]>, default: () => [] },
+    list: { type: Array as PropType<TabbarItem[]>, default: () => [] },
     /** 切换前回调，返回true或Promise */
     beforeSwitch: { type: Function as PropType<((index: number) => boolean | Promise<any>) | null>, default: null },
     /** 是否显示顶部横线 */

package/components/u-tabbar/u-tabbar.vue

@@ -74,7 +74,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, getCurrentInstance } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { $u } from '../..';
 import { TabbarProps } from './types';
 
@@ -250,7 +250,7 @@ function getMidButtonLeft() {
             top: -48rpx;
             position: absolute;
             z-index: 4;
-            background-color: #ffffff;
+            background-color: var(--u-bg-white);
             // 由于安卓的无能，导致只有3个tabbar item时，此css计算方式有误差
             // 故使用js计算的形式来定位，此处不注释，是因为js计算有延后，避免出现位置闪动
             left: 50%;
@@ -270,7 +270,7 @@ function getMidButtonLeft() {
             position: relative;
             &__button {
                 position: absolute;
-                top: 14rpx;
+                top: 8rpx;
                 left: 50%;
                 transform: translateX(-50%);
             }
@@ -279,7 +279,7 @@ function getMidButtonLeft() {
                 font-size: 26rpx;
                 line-height: 28rpx;
                 position: absolute;
-                bottom: 14rpx;
+                bottom: 8rpx;
                 left: 50%;
                 transform: translateX(-50%);
                 width: 100%;
@@ -303,7 +303,7 @@ function getMidButtonLeft() {
                 justify-content: center;
                 align-items: center;
                 position: absolute;
-                background-color: #ffffff;
+                background-color: var(--u-bg-white);
                 top: -40rpx;
                 left: 50%;
                 z-index: 6;

package/components/u-table/types.ts

@@ -9,7 +9,7 @@ import { baseProps } from '../common/props';
 export const TableProps = {
     ...baseProps,
     /** 表格边框的颜色 */
-    borderColor: { type: String, default: '#e4e7ed' },
+    borderColor: { type: String, default: 'var(--u-border-color)' },
     /** 单元格的内容对齐方式，作用类似css的text-align */
     align: { type: String as PropType<TextAlign>, default: 'center' },
     /** 单元格的内边距，同css的padding写法 */
@@ -17,11 +17,11 @@ export const TableProps = {
     /** 单元格字体大小，单位rpx */
     fontSize: { type: [String, Number] as PropType<number | string>, default: 28 },
     /** 单元格字体颜色 */
-    color: { type: String, default: '#606266' },
+    color: { type: String, default: 'var(--u-content-color)' },
     /** th单元格的样式，对象形式(将th所需参数放在table组件，是为了避免每一个th组件要写一遍） */
     thStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
     /** 表格的背景颜色 */
-    bgColor: { type: String, default: '#ffffff' }
+    bgColor: { type: String, default: 'var(--u-bg-white)' }
 };
 
 export type TableProps = ExtractPropTypes<typeof TableProps>;

package/components/u-table/u-table.vue

@@ -26,12 +26,12 @@ import { $u } from '../..';
  * table 表格
  * @description 表格组件一般用于展示大量结构化数据的场景
  * @tutorial https://uviewpro.cn/zh/components/table.html
- * @property {String} border-color 表格边框的颜色（默认#e4e7ed）
- * @property {String} bg-color 表格的背景颜色（默认#ffffff）
+ * @property {String} border-color 表格边框的颜色（默认var(--u-border-color)）
+ * @property {String} bg-color 表格的背景颜色（默认var(--u-bg-white)）
  * @property {String} align 单元格的内容对齐方式，作用类似css的text-align（默认center）
  * @property {String} padding 单元格的内边距，同css的padding写法（默认10rpx 0）
  * @property {String | Number} font-size 单元格字体大小，单位rpx（默认28）
- * @property {String} color 单元格字体颜色（默认#606266）
+ * @property {String} color 单元格字体颜色（默认var(--u-content-color)）
  * @property {Object} th-style th单元格的样式，对象形式(将th所需参数放在table组件，是为了避免每一个th组件要写一遍）
  * @event {Function} click 点击组件时触发
  * @event {Function} close 点击关闭按钮时触发

package/components/u-tabs/types.ts

@@ -32,7 +32,7 @@ export const TabsProps = {
     /** 单个tab的左右内边距之和，单位rpx */
     gutter: { type: [String, Number] as PropType<number | string>, default: 30 },
     /** 导航栏的背景颜色 */
-    bgColor: { type: String, default: '#ffffff' },
+    bgColor: { type: String, default: 'var(--u-bg-white)' },
     /** 读取传入的数组对象的属性(tab名称) */
     name: { type: String, default: 'name' },
     /** 读取传入的数组对象的属性(徽标数) */

package/components/u-tabs/u-tabs.vue

@@ -52,7 +52,7 @@ import { TabsProps } from './types';
  * @property {String|Number} font-size tab文字大小，单位rpx（默认30）
  * @property {String|Number} duration 滑块移动一次所需的时间，单位秒（默认0.5）
  * @property {String} active-color 滑块和激活tab文字的颜色（默认主题色primary）
- * @property {String} inactive-color tabs文字颜色（默认#303133）
+ * @property {String} inactive-color tabs文字颜色（默认var(--u-main-color)）
  * @property {String|Number} bar-width 滑块宽度，单位rpx（默认40）
  * @property {Object} active-item-style 活动tabs item的样式，对象形式
  * @property {Object} bar-style 底部滑块的样式，对象形式
@@ -60,7 +60,7 @@ import { TabsProps } from './types';
  * @property {String|Number} bar-height 滑块高度，单位rpx（默认6）
  * @property {String|Number} item-width 标签的宽度（默认auto）
  * @property {String|Number} gutter 单个tab标签的左右内边距之和，单位rpx（默认40）
- * @property {String} bg-color tabs导航栏的背景颜色（默认#ffffff）
+ * @property {String} bg-color tabs导航栏的背景颜色（默认var(--u-bg-white)）
  * @property {String} name 组件内部读取的list参数中的属性名（tab名称），见官网说明（默认name）
  * @property {String} count 组件内部读取的list参数中的属性名（badge徽标数），同name属性的使用，见官网说明（默认count）
  * @property {Array} offset 设置badge徽标数的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx（默认[5, 20]）

package/components/u-tabs-swiper/types.ts

@@ -34,7 +34,7 @@ export const TabsSwiperProps = {
     /** z-index 层级 */
     zIndex: { type: [Number, String] as PropType<number | string>, default: 1 },
     /** tabs导航栏的背景颜色 */
-    bgColor: { type: String, default: '#ffffff' },
+    bgColor: { type: String, default: 'var(--u-bg-white)' },
     /** 居中模式，window/组件宽度 */
     autoCenterMode: { type: String as unknown as PropType<TabsSwiperAutoCenterMode>, default: 'window' },
     /** 组件内部读取的list参数中的属性名（tab名称） */

package/components/u-tabs-swiper/u-tabs-swiper.vue

@@ -55,14 +55,14 @@ import { $u } from '../..';
  * @property {String|Number} font-size tab文字大小，单位rpx（默认30）
  * @property {String|Number} swiper-width tabs组件外部swiper的宽度，默认为屏幕宽度，单位rpx（默认750）
  * @property {String} active-color 滑块和激活tab文字的颜色（默认主题色primary）
- * @property {String} inactive-color tabs文字颜色（默认#303133）
+ * @property {String} inactive-color tabs文字颜色（默认var(--u-main-color)）
  * @property {String|Number} bar-width 滑块宽度，单位rpx（默认40）
  * @property {String|Number} bar-height 滑块高度，单位rpx（默认6）
  * @property {Object} bar-style 底部滑块的样式，对象形式
  * @property {Object} active-item-style 活动tabs item的样式，对象形式
  * @property {Boolean} show-bar 是否显示底部的滑块（默认true）
  * @property {String|Number} gutter 单个tab标签的左右内边距之和，单位rpx（默认40）
- * @property {String} bg-color tabs导航栏的背景颜色（默认#ffffff）
+ * @property {String} bg-color tabs导航栏的背景颜色（默认var(--u-bg-white)）
  * @property {String} name 组件内部读取的list参数中的属性名，见官网说明（默认name）
  * @property {String} count 组件内部读取的list参数中的属性名（badge徽标数），同name属性的使用，见官网说明（默认count）
  * @property {Array} offset 设置badge徽标数的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx（默认[5, 20]）

package/components/u-tag/u-tag.vue

@@ -96,7 +96,7 @@ const iconStyle = computed(() => {
     if (props.size === 'mini') style.fontSize = '20rpx';
     else style.fontSize = '22rpx';
     if (props.mode === 'plain' || props.mode === 'light') style.color = props.type;
-    else if (props.mode === 'dark') style.color = '#ffffff';
+    else if (props.mode === 'dark') style.color = 'var(--u-white-color)';
     if (props.closeColor) style.color = props.closeColor;
     return style;
 });
@@ -110,7 +110,7 @@ const closeIconColor = computed(() => {
     // 最后如果上面的三者都不合适，就返回type值给图标获取颜色
     if (props.closeColor) return props.closeColor;
     else if (props.color) return props.color;
-    else if (props.mode === 'dark') return '#ffffff';
+    else if (props.mode === 'dark') return 'var(--u-white-color)';
     else return props.type;
 });
 
@@ -186,55 +186,55 @@ function close() {
 
 .u-mode-dark-primary {
     background-color: $u-type-primary;
-    color: #ffffff;
+    color: var(--u-white-color);
 }
 
 .u-mode-dark-success {
     background-color: $u-type-success;
-    color: #ffffff;
+    color: var(--u-white-color);
 }
 
 .u-mode-dark-error {
     background-color: $u-type-error;
-    color: #ffffff;
+    color: var(--u-white-color);
 }
 
 .u-mode-dark-warning {
     background-color: $u-type-warning;
-    color: #ffffff;
+    color: var(--u-white-color);
 }
 
 .u-mode-dark-info {
     background-color: $u-type-info;
-    color: #ffffff;
+    color: var(--u-white-color);
 }
 
 .u-mode-plain-primary {
-    background-color: #ffffff;
+    background-color: var(--u-bg-white);
     color: $u-type-primary;
     border: 1px solid $u-type-primary;
 }
 
 .u-mode-plain-success {
-    background-color: #ffffff;
+    background-color: var(--u-bg-white);
     color: $u-type-success;
     border: 1px solid $u-type-success;
 }
 
 .u-mode-plain-error {
-    background-color: #ffffff;
+    background-color: var(--u-bg-white);
     color: $u-type-error;
     border: 1px solid $u-type-error;
 }
 
 .u-mode-plain-warning {
-    background-color: #ffffff;
+    background-color: var(--u-bg-white);
     color: $u-type-warning;
     border: 1px solid $u-type-warning;
 }
 
 .u-mode-plain-info {
-    background-color: #ffffff;
+    background-color: var(--u-bg-white);
     color: $u-type-info;
     border: 1px solid $u-type-info;
 }

package/components/u-text/types.ts

@@ -31,7 +31,7 @@ export const TextProps = {
     /** 显示行数，超出省略号 */
     lines: { type: [String, Number] as PropType<string | number>, default: '' },
     /** 文本颜色 */
-    color: { type: String, default: '#303133' },
+    color: { type: String, default: 'var(--u-main-color)' },
     /** 字体大小 */
     size: { type: [String, Number] as PropType<string | number>, default: 28 },
     /** 图标样式 */

package/components/u-text/u-text.vue

@@ -102,7 +102,7 @@ import { $u } from '../../';
  * @property {Boolean} 					bold		是否粗体，默认normal（默认 false ）
  * @property {Boolean} 					block		是否块状（默认 false ）
  * @property {String | Number} 			lines		文本显示的行数，如果设置，超出此行数，将会显示省略号
- * @property {String} 					color		文本颜色（默认 '#303133' ）
+ * @property {String} 					color		文本颜色（默认 'var(--u-main-color)' ）
  * @property {String | Number} 			size		字体大小（默认 15 ）
  * @property {Object | String} 			iconStyle	图标的样式 （默认 {fontSize: '15px'} ）
  * @property {String} 					decoration	文字装饰，下划线，中划线等，可选值 none|underline|line-through（默认 'none' ）

package/components/u-textarea/types.ts

@@ -5,7 +5,7 @@ const textarea = {
     value: '',
     placeholder: '',
     placeholderClass: 'input-placeholder',
-    placeholderStyle: 'color: #c0c4cc',
+    placeholderStyle: 'color: var(--u-light-color)',
     height: '100rpx',
     confirmType: 'done',
     disabled: false,

package/components/u-textarea/u-textarea.vue

@@ -42,7 +42,7 @@
         <text
             class="u-textarea__count"
             :style="{
-                'background-color': props.disabled ? 'transparent' : '#fff'
+                'background-color': props.disabled ? 'transparent' : 'var(--u-bg-white)'
             }"
             v-if="props.count"
         >
@@ -54,7 +54,7 @@
                 class="u-textarea__right-icon__clear u-textarea__right-icon__item"
                 v-if="clearable && modelValue != '' && !disabled"
             >
-                <u-icon size="32" name="close-circle-fill" color="#c0c4cc" @click="onClear" />
+                <u-icon size="32" name="close-circle-fill" color="var(--u-light-color)" @click="onClear" />
             </view>
         </view>
     </view>
@@ -285,14 +285,14 @@ defineExpose({
 
 .u-textarea {
     border-radius: 4px;
-    background-color: #fff;
+    background-color: var(--u-bg-white);
     position: relative;
     @include flex;
     flex: 1;
 
     &--border {
         border-radius: 4px;
-        border: 1px solid $u-form-item-border-color;
+        border: 1px solid $u-border-color;
     }
 
     &--error {
@@ -308,7 +308,7 @@ defineExpose({
     }
 
     &--disabled {
-        background-color: #f5f7fa;
+        background-color: $u-bg-gray-light;
     }
 
     &__field {
@@ -324,7 +324,7 @@ defineExpose({
         bottom: 0;
         font-size: 12px;
         color: $u-tips-color;
-        background-color: #ffffff;
+        background-color: var(--u-bg-white);
         padding: 1px 4px;
         border-radius: 10px;
         line-height: 16px;

package/components/u-time-line/u-time-line.vue

@@ -46,7 +46,7 @@ const props = defineProps({ ...baseProps });
     top: 12rpx;
     width: 1px;
     bottom: 0;
-    border-left: 1px solid #ddd;
+    border-left: 1px solid var(--u-divider-color);
     transform-origin: 0 0;
     transform: scaleX(0.5);
 }

package/components/u-time-line-item/types.ts

@@ -8,7 +8,7 @@ import { baseProps } from '../common/props';
 export const TimeLineItemProps = {
     ...baseProps,
     /** 节点的背景颜色 */
-    bgColor: { type: String, default: '#ffffff' },
+    bgColor: { type: String, default: 'var(--u-bg-white)' },
     /** 节点左边图标绝对定位的top值，单位rpx */
     nodeTop: { type: [String, Number] as PropType<string | number>, default: '' }
 };

package/components/u-time-line-item/u-time-line-item.vue

@@ -31,14 +31,13 @@ import { $u } from '../../';
  * timeLineItem 时间轴Item
  * @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。(搭配u-time-line使用)
  * @tutorial https://uviewpro.cn/zh/components/timeLine.html
- * @property {String} bg-color 左边节点的背景颜色，一般通过slot内容自定义背景颜色即可（默认#ffffff）
+ * @property {String} bg-color 左边节点的背景颜色，一般通过slot内容自定义背景颜色即可（默认var(--u-bg-white)）
  * @property {String | Number} node-top 节点左边图标绝对定位的top值，单位rpx
  * @example <u-time-line-item node-top="2">...</u-time-line-item>
  */
 
 /**
  * 节点的背景颜色
- * @default "#ffffff"
  */
 const props = defineProps(TimeLineItemProps);
 
@@ -85,6 +84,6 @@ const nodeStyle = computed(() => {
     height: 16rpx;
     width: 16rpx;
     border-radius: 100rpx;
-    background: #ddd;
+    background: var(--u-divider-color);
 }
 </style>

package/components/u-toast/u-toast.vue

@@ -165,9 +165,9 @@ defineExpose<ToastExpose>({
     z-index: -1;
     transition: opacity 0.3s;
     text-align: center;
-    color: #fff;
+    color: var(--u-white-color);
     border-radius: 8rpx;
-    background: #585858;
+    background: var(--u-content-color);
     @include vue-flex;
     align-items: center;
     justify-content: center;
@@ -224,29 +224,29 @@ defineExpose<ToastExpose>({
 .u-type-success {
     color: $u-type-success;
     background-color: $u-type-success-light;
-    border: 1px solid #bef5c8;
+    border: 1px solid var(--u-type-success-light);
 }
 
 .u-type-error {
     color: $u-type-error;
     background-color: $u-type-error-light;
-    border: 1px solid #fde2e2;
+    border: 1px solid var(--u-type-error-light);
 }
 
 .u-type-warning {
     color: $u-type-warning;
     background-color: $u-type-warning-light;
-    border: 1px solid #faecd8;
+    border: 1px solid var(--u-type-warning-light);
 }
 
 .u-type-info {
     color: $u-type-info;
     background-color: $u-type-info-light;
-    border: 1px solid #ebeef5;
+    border: 1px solid var(--u-bg-gray-light);
 }
 
 .u-type-default {
-    color: #fff;
-    background-color: #585858;
+    color: var(--u-white-color);
+    background-color: var(--u-content-color);
 }
 </style>

package/components/u-top-tips/u-top-tips.vue

@@ -96,7 +96,7 @@ view {
     position: fixed;
     z-index: 1;
     padding: 20rpx 30rpx;
-    color: #ffffff;
+    color: var(--u-white-color);
     font-size: 28rpx;
     left: 0;
     right: 0;

package/components/u-upload/types.ts

@@ -21,11 +21,11 @@ export const UploadProps = {
     /** 是否显示上传进度 */
     showProgress: { type: Boolean, default: true },
     /** 删除按钮背景色 */
-    delBgColor: { type: String, default: '#f56c6c' },
+    delBgColor: { type: String, default: 'var(--u-type-error)' },
     /** 删除按钮图标 */
     delIcon: { type: String, default: 'close' },
     /** 删除按钮颜色 */
-    delColor: { type: String, default: '#fff' },
+    delColor: { type: String, default: 'var(--u-white-color)' },
     /** 图片裁剪模式 */
     imageMode: { type: String as PropType<ImgMode>, default: 'aspectFill' },
     /** 是否自定义上传按钮 */

package/components/u-upload/u-upload.vue

@@ -553,7 +553,7 @@ defineExpose({ clear, reUpload, selectFile, upload, retry, remove, doPreviewImag
 }
 
 .u-error-btn {
-    color: #ffffff;
+    color: var(--u-white-color);
     background-color: $u-type-error;
     font-size: 20rpx;
     padding: 4px 0;

package/index.scss

@@ -1,4 +1,5 @@
 // 引入公共基础类
+@import './libs/css/style.theme.scss';
 @import './libs/css/common.scss';
 @import './libs/css/color.scss';
 

package/index.ts

@@ -1,6 +1,7 @@
-import { $u, type RequestOptions } from './libs';
-import type { UViewProOptions } from './types/global';
+import { $u, type RequestOptions, initTheme } from './libs';
+import type { UViewProOptions, Theme } from './types/global';
 import { logger } from './libs/util/logger';
+import { defaultThemes } from './libs/config/theme-tokens';
 
 declare const uni: {
     [key: string]: any;
@@ -13,16 +14,46 @@ declare const uni: {
 
 // $u挂载到uni对象上
 const install = (app: any, options?: UViewProOptions): void => {
-    if (options) {
-        // 配置主题：使用 $u.setTheme 以就地更新 reactive $u.color
-        if (options.theme) {
-            $u.setTheme?.(options.theme);
+    try {
+        if (options) {
+            // 配置主题：统一使用 useTheme 的 initTheme 初始化，避免重复初始化
+            if (options.theme) {
+                // 如果是数组，则为多主题配置
+                // 直接使用 useTheme 的 initTheme，它会智能处理重复初始化
+                if (Array.isArray(options.theme)) {
+                    initTheme(options.theme);
+                } else {
+                    // 兼容之前只有一套样式的情况,需要覆盖默认主题
+                    // 获取默认主题（uviewpro）
+                    const defaultTheme = defaultThemes[0];
+                    if (defaultTheme) {
+                        // 创建新主题对象，用用户的 theme 覆盖默认主题的 color
+                        const mergedTheme: Theme = {
+                            ...defaultTheme,
+                            color: {
+                                ...defaultTheme.color,
+                                ...options.theme
+                            }
+                        };
+                        // 初始化主题（只包含覆盖后的默认主题）
+                        initTheme([mergedTheme], defaultTheme.name);
+                    }
+                }
+            } else {
+                // 默认初始化系统主题
+                initTheme();
+            }
+            // 设置调试模式
+            logger
+                .setDebugMode(options?.log?.debug ?? false)
+                .setPrefix(options?.log?.prefix)
+                .setShowCallerInfo(options?.log?.showCallerInfo ?? true);
+        } else {
+            // 默认初始化系统主题
+            initTheme();
         }
-        // 设置调试模式
-        logger
-            .setDebugMode(options?.log?.debug ?? true)
-            .setPrefix(options?.log?.prefix)
-            .setShowCallerInfo(options?.log?.showCallerInfo ?? true);
+    } catch (error) {
+        console.error('[install options] Error:', error);
     }
     uni.$u = $u;
     // 可扩展更多配置项