uview-pro 0.3.16 → 0.4.1

package/changelog.md

@@ -1,3 +1,69 @@
+## 0.4.1（2025-11-30）
+
+### ✨ Features | 新功能
+
+- **root:** 新增根节点组件支持，优化主题文件 ([12d14f8](https://github.com/anyup/uView-Pro/commit/12d14f8c859bae1e330b246b6eb1f87c2597c2d7))
+- **iconfont:** 新增iconfont实例 ([4d34d25](https://github.com/anyup/uView-Pro/commit/4d34d25f0c124a6622b8b38b7501b85586843a42))
+- **locales:** 新增locales中英文字段 ([2dbad6d](https://github.com/anyup/uView-Pro/commit/2dbad6d38bc5cd2fbe55aa0998d2264782cb4dfe))
+- **markdown-view:** 新增 markdown-view 模块 ([9e21b6a](https://github.com/anyup/uView-Pro/commit/9e21b6af96c17175dd178923ab2f98c595bacb20))
+- **u-config-provider:** 新增 u-config-provider 组件用于全局主题管理 ([f44857c](https://github.com/anyup/uView-Pro/commit/f44857c44f0354b9408bc40c8d586ace1ea40538))
+- **theme:** 实现自定义多主题，主题切换功能 ([9551d26](https://github.com/anyup/uView-Pro/commit/9551d260451d2c21b7fe9dfab4850a57c5601573))
+- **demo:** 新增 demo-page 组件并重构组件演示页面，添加 API 文档展示 ([ecfd77e](https://github.com/anyup/uView-Pro/commit/ecfd77ea3776720e0bbba7f7678896e685adff3a))
+- **demo-page:** 优化代码示例组件文档获取方式 ([50738be](https://github.com/anyup/uView-Pro/commit/50738beafa879e3f95831287a1aa7cb560b59c20))
+- **theme:** 实现暗黑模式并优化多主题管理 ([38f9346](https://github.com/anyup/uView-Pro/commit/38f93464edf7ba3e6a0d28c025e31cfe27a147bb))
+- **u-config-provider:** 完善u-config-provider主题注入和暗黑模式切换 ([726a7f9](https://github.com/anyup/uView-Pro/commit/726a7f96a31c2e6346c9037842963624b22c3f60))
+- **demo:** 优化主题切换示例逻辑和样式 ([d69af6a](https://github.com/anyup/uView-Pro/commit/d69af6a82b639d35ce757abccccb9f8f9aae14a5))
+- **theme:** 优化主题系统，兼容单主题、多主题配置能力 ([d06cd7f](https://github.com/anyup/uView-Pro/commit/d06cd7f592e5ae4f9dae7f0cd90f173f76cc5e62))
+- **theme:** 更新深蓝主题的色彩配置 ([77e8e5c](https://github.com/anyup/uView-Pro/commit/77e8e5c6ca55281253f86dbc5244c807f04324b3))
+- **config-provider:** 增加非 H5 平台系统暗黑模式识别 ([2175dc6](https://github.com/anyup/uView-Pro/commit/2175dc6892f7f559507e19c44638f5c57ac13e4a))
+- **u-button:** 调整u-button按钮节流默认值为0，优化点击逻辑 ([3fa2593](https://github.com/anyup/uView-Pro/commit/3fa2593dba31c05a97e001fda9cd233306f42a9d))
+- **theme:** 优化主题配置中的暗黑模式处理逻辑，按规则自动生成完整暗色方案 ([8246853](https://github.com/anyup/uView-Pro/commit/82468538004c88637b98c9bd2381b0d44aef0d22))
+- **system:** 添加系统主题变更监听 ([9c35243](https://github.com/anyup/uView-Pro/commit/9c3524390847d92c7345e8a27c4603afa8d094f4))
+- **theme:** 多主题配置兼容单主题 ([79d3223](https://github.com/anyup/uView-Pro/commit/79d3223459a306fb4ba320713ed03a4a6579f563))
+- **u-image:** 增强 u-image 组件自定义样式 ([b133c3c](https://github.com/anyup/uView-Pro/commit/b133c3c00f14738eaa0a61eaec19dbe1b5defcfe))
+
+### ♻️ Code Refactoring | 代码重构
+
+- **app:** 添加本地应用资源 ([cd3f020](https://github.com/anyup/uView-Pro/commit/cd3f02074c871772ea0e42fb26336751eeda7c35))
+- **theme:** 重构主题配置和颜色处理逻辑 ([31aa36b](https://github.com/anyup/uView-Pro/commit/31aa36b9207144836be7073a804b8c7ebd68fc6b))
+- **demo:** 修改演示页面功能及样式，调整演示组件整体样式 ([8760b3c](https://github.com/anyup/uView-Pro/commit/8760b3c82ff129bd1695e384abbc762de6c85cd4))
+- **components:** 优化多个组件主题颜色变量使用，兼容多主题和暗黑模式 ([1a2856f](https://github.com/anyup/uView-Pro/commit/1a2856fc98ec3169d29330f9b7470e936d4aa334))
+- **demo:** 优化演示示例 Demo 的功能 ([445878b](https://github.com/anyup/uView-Pro/commit/445878b906475f5dd3bcc9b15efd9aac597f0603))
+- **demo-page:** 优化demo page展示，主题切换逻辑优化 ([c5ecbaa](https://github.com/anyup/uView-Pro/commit/c5ecbaa437e51cf1bf47f84f0f3bc071f37dd413))
+- 更新自定义主题文件 ([cab8be3](https://github.com/anyup/uView-Pro/commit/cab8be38832bca9de1254a06f199e6b3704ee88e))
+- **color:** 重构颜色组件以提升可维护性 ([d92a052](https://github.com/anyup/uView-Pro/commit/d92a0526f7bfa51eeb40bb90eb0e7fc8f24fe488))
+
+### ⚡ Performance Improvements | 性能优化
+
+- 优化微信小程序代码包体积 ([bf56c99](https://github.com/anyup/uView-Pro/commit/bf56c99515e41d067481cd6498187ed5bd37c193))
+
+### 💄 Styles | 风格
+
+- **demo:** 优化演示页面样式 ([ae5de09](https://github.com/anyup/uView-Pro/commit/ae5de091ee1234b4432eb7d2609f77fd5afd27aa))
+- **components:** 使用变量替代硬编码的颜色值 ([cf0044e](https://github.com/anyup/uView-Pro/commit/cf0044e3be68daff91b764eb31a75cf3ecad86aa))
+- **demo:** 优化替代组件颜色硬编码值，保证主题色和暗黑模式 ([291e92b](https://github.com/anyup/uView-Pro/commit/291e92b07d80532b1620f62ae0ac3f4909bdab6a))
+
+### 📦‍ Build System | 打包构建
+
+- 新增颜色替换脚本 ([b160c28](https://github.com/anyup/uView-Pro/commit/b160c28e838a4f27b9bfa2f3ce47e8ad46e807a0))
+- 指定 Node.js 版本 ([7147284](https://github.com/anyup/uView-Pro/commit/714728421527bbd5abed02fe4fdf51cdf3c2a583))
+- **deps:** 更新 dcloudio uni-app 依赖版本至 4.76 ([f92a348](https://github.com/anyup/uView-Pro/commit/f92a34892369facda3d89add34cfbeddc1872a65))
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **u-tabbar:** 修复 u-tabbar 在鸿蒙应用上高度计算错误的问题 ([cc4bc1a](https://github.com/anyup/uView-Pro/commit/cc4bc1add7ef63f6d9eb519e9ee38414ef3c73eb))
+- **clipboard:** 处理未传入可选参数引起的错误 ([1756b53](https://github.com/anyup/uView-Pro/commit/1756b53f8ce2e2a21d288124c257b4729e48d92a))
+- **theme:** 修复获取系统设置的theme不正确的问题 ([58b0cbb](https://github.com/anyup/uView-Pro/commit/58b0cbb3aa666d8f127bc88850b66d469cc1b996))
+- **install:** 优化 install 方法的错误处理和代码结构 ([7edb867](https://github.com/anyup/uView-Pro/commit/7edb8673b0cdf4238c184a480b91fb73908e6c5c))
+
+### 👷 Continuous Integration | CI 配置
+
+- **release:** 支持直接指定版本号发布 ([e4db5f8](https://github.com/anyup/uView-Pro/commit/e4db5f8b349954548ddef37fc02aa5a397cace01))
+
+### 👥 Contributors
+
+<a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> <a href="https://github.com/lonelyflyer"><img src="https://github.com/lonelyflyer.png?size=40" width="40" height="40" alt="Lonelyflyer" title="Lonelyflyer"/></a> 
+
 ## 0.3.16（2025-11-21）
 
 ### 📝 Documentation | 文档

package/components/u-action-sheet-item/u-action-sheet-item.vue

@@ -47,7 +47,7 @@ const itemStyle = computed(() => {
     style.color = props.color || parentExposed?.value?.props?.color;
     style.fontSize = $u.addUnit(props.fontSize || parentExposed?.value?.props?.fontSize);
     style.padding = $u.addUnit(props.padding);
-    if (props.disabled) style.color = '#c0c4cc';
+    if (props.disabled) style.color = 'var(--u-light-color)';
     return style;
 });
 

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

@@ -42,7 +42,7 @@
                 v-if="closeAble && !closeText"
                 hoverClass="u-type-error-hover-color"
                 name="close"
-                color="#c0c4cc"
+                color="var(--u-light-color)"
                 :size="22"
                 class="u-close-icon"
                 :style="{
@@ -154,7 +154,7 @@ function onClose() {
     border-radius: 8rpx;
     position: relative;
     transition: all 0.3s linear;
-    border: 1px solid #fff;
+    border: 1px solid var(--u-white-color);
 
     &--bg--primary-light {
         background-color: $u-type-primary-light;

package/components/u-avatar/u-avatar.vue

@@ -44,7 +44,7 @@ let base64Avatar =
  * avatar 头像
  * @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
  * @tutorial https://uviewpro.cn/zh/components/avatar.html
- * @property {String} bg-color 背景颜色，一般显示文字时用（默认#ffffff）
+ * @property {String} bg-color 背景颜色，一般显示文字时用（默认var(--u-bg-white)）
  * @property {String} src 头像路径，如加载失败，将会显示默认头像
  * @property {String Number} size 头像尺寸，可以为指定字符串(large, default, mini)，或者数值，单位rpx（默认default）
  * @property {String} mode 显示类型，见上方说明（默认circle）
@@ -174,7 +174,7 @@ function onClick() {
     &__sex {
         position: absolute;
         width: 32rpx;
-        color: #ffffff;
+        color: var(--u-white-color);
         height: 32rpx;
         @include vue-flex;
         justify-content: center;
@@ -183,7 +183,7 @@ function onClick() {
         top: 5%;
         z-index: 1;
         right: -7%;
-        border: 1px #ffffff solid;
+        border: 1px var(--u-white-color) solid;
 
         &--man {
             background-color: $u-type-primary;
@@ -201,7 +201,7 @@ function onClick() {
     &__level {
         position: absolute;
         width: 32rpx;
-        color: #ffffff;
+        color: var(--u-white-color);
         height: 32rpx;
         @include vue-flex;
         justify-content: center;
@@ -210,7 +210,7 @@ function onClick() {
         bottom: 5%;
         z-index: 1;
         right: -7%;
-        border: 1px #ffffff solid;
+        border: 1px var(--u-white-color) solid;
         background-color: $u-type-warning;
     }
 }

package/components/u-avatar-cropper/u-avatar-cropper.vue

@@ -129,8 +129,8 @@ onMounted(() => {
 
     // 设置导航栏样式，以免用户在page.json中没有设置为黑色背景
     uni.setNavigationBarColor({
-        frontColor: '#ffffff',
-        backgroundColor: '#000000'
+        frontColor: 'var(--u-white-color)',
+        backgroundColor: 'var(--u-bg-black)'
     });
 
     // 初始化 cropper 实例
@@ -253,8 +253,8 @@ function uploadTap() {
 }
 
 .cropper-buttons {
-    background-color: #000000;
-    color: #eee;
+    background-color: var(--u-bg-black);
+    color: var(--u-divider-color);
 }
 
 .cropper-wrapper {
@@ -264,7 +264,7 @@ function uploadTap() {
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    background-color: #000;
+    background-color: var(--u-bg-black);
 }
 
 .cropper-buttons {

package/components/u-avatar-cropper/weCropper.js

@@ -1134,7 +1134,7 @@
         self.setBoundStyle = function (ref) {
             if (ref === void 0) ref = {};
             var color = ref.color;
-            if (color === void 0) color = '#04b00f';
+            if (color === void 0) color = 'var(--u-type-success-dark)';
             var mask = ref.mask;
             if (mask === void 0) mask = 'rgba(0, 0, 0, 0.3)';
             var lineWidth = ref.lineWidth;

package/components/u-avatar-cropper/weCropper.ts

@@ -1131,7 +1131,7 @@ function cut(this: any) {
     self.setBoundStyle = function (ref: any) {
         if (ref === void 0) ref = {};
         var color = ref.color;
-        if (color === void 0) color = '#04b00f';
+        if (color === void 0) color = 'var(--u-type-success-dark)';
         var mask = ref.mask;
         if (mask === void 0) mask = 'rgba(0, 0, 0, 0.3)';
         var lineWidth = ref.lineWidth;

package/components/u-back-top/types.ts

@@ -27,7 +27,7 @@ export const BackTopProps = {
     iconStyle: {
         type: Object as PropType<Record<string, any>>,
         default: () => ({
-            color: '#909399',
+            color: 'var(--u-tips-color)',
             fontSize: '38rpx'
         })
     }

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

@@ -120,7 +120,7 @@ function backToTop() {
     @include vue-flex;
     flex-direction: column;
     justify-content: center;
-    background-color: #e1e1e1;
+    background-color: var(--u-divider-color);
     color: $u-content-color;
     align-items: center;
     transition: opacity 0.4s;

package/components/u-badge/u-badge.vue

@@ -57,7 +57,7 @@ import { $u } from '../..';
  * @property {Boolean} show-zero 当数值为 0 时，是否展示 Badge（默认false）
  * @property {String} size Badge的尺寸，设为mini会得到小一号的Badge（默认default）
  * @property {Array} offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx。absolute为true时有效（默认[20, 20]）
- * @property {String} color 字体颜色（默认#ffffff）
+ * @property {String} color 字体颜色（默认var(--u-white-color)）
  * @property {String} bgColor 背景颜色，优先级比type高，如设置，type参数会失效
  * @property {Boolean} is-center 组件中心点是否和父组件右上角重合，优先级比offset高，如设置，offset参数会失效（默认false）
  * @example <u-badge type="error" count="7"></u-badge>
@@ -150,34 +150,4 @@ const show = computed(() => {
     transform: scale(0.8);
     transform-origin: center center;
 }
-
-// .u-primary {
-// 	background: $u-type-primary;
-// 	color: #fff;
-// }
-
-// .u-error {
-// 	background: $u-type-error;
-// 	color: #fff;
-// }
-
-// .u-warning {
-// 	background: $u-type-warning;
-// 	color: #fff;
-// }
-
-// .u-success {
-// 	background: $u-type-success;
-// 	color: #fff;
-// }
-
-// .u-black {
-// 	background: #585858;
-// 	color: #fff;
-// }
-
-.u-info {
-    background-color: $u-type-info;
-    color: #fff;
-}
 </style>

package/components/u-button/types.ts

@@ -56,7 +56,7 @@ export const ButtonProps = {
     /** 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取 */
     dataName: { type: String, default: '' },
     /** 节流，一定时间内只能触发一次 */
-    throttleTime: { type: [String, Number], default: 1000 },
+    throttleTime: { type: [String, Number], default: 0 },
     /** 按住后多久出现点击态，单位毫秒 */
     hoverStartTime: { type: [String, Number], default: 20 },
     /** 手指松开后点击态保留时间，单位毫秒 */

package/components/u-button/u-button.vue

@@ -177,19 +177,27 @@ const showHairLineBorder = computed(() => {
  * @emits click
  */
 function click(e: any) {
-    $u.throttle(() => {
-        // 如果按钮时disabled和loading状态，不触发水波纹效果
-        if (props.loading === true || props.disabled === true) return;
-        // 是否开启水波纹效果
-        if (props.ripple) {
-            // 每次点击时，移除上一次的类，再次添加，才能触发动画效果
-            waveActive.value = false;
-            nextTick(() => {
-                getWaveQuery(e);
-            });
-        }
-        emit('click', e);
-    }, Number(props.throttleTime));
+    if (Number(props.throttleTime)) {
+        $u.throttle(() => {
+            clickAction(e);
+        }, Number(props.throttleTime));
+    } else {
+        clickAction(e);
+    }
+}
+
+function clickAction(e: any) {
+    // 如果按钮时disabled和loading状态，不触发水波纹效果
+    if (props.loading === true || props.disabled === true) return;
+    // 是否开启水波纹效果
+    if (props.ripple) {
+        // 每次点击时，移除上一次的类，再次添加，才能触发动画效果
+        waveActive.value = false;
+        nextTick(() => {
+            getWaveQuery(e);
+        });
+    }
+    emit('click', e);
 }
 
 /**
@@ -350,65 +358,65 @@ function agreeprivacyauthorization(event: any) {
     transition: all 0.15s;
 
     &--bold-border {
-        border: 1px solid #ffffff;
+        border: 1px solid var(--u-white-color);
     }
 
     &--default {
         color: $u-content-color;
-        border-color: #c0c4cc;
-        background-color: #ffffff;
+        border-color: var(--u-light-color);
+        background-color: var(--u-bg-white);
     }
 
     &--primary {
-        color: #ffffff;
+        color: var(--u-white-color);
         border-color: $u-type-primary;
         background-color: $u-type-primary;
     }
 
     &--success {
-        color: #ffffff;
+        color: var(--u-white-color);
         border-color: $u-type-success;
         background-color: $u-type-success;
     }
 
     &--error {
-        color: #ffffff;
+        color: var(--u-white-color);
         border-color: $u-type-error;
         background-color: $u-type-error;
     }
 
     &--warning {
-        color: #ffffff;
+        color: var(--u-white-color);
         border-color: $u-type-warning;
         background-color: $u-type-warning;
     }
 
     &--default--disabled {
-        color: #ffffff;
-        border-color: #e4e7ed;
-        background-color: #ffffff;
+        color: var(--u-white-color);
+        border-color: var(--u-border-color);
+        background-color: var(--u-bg-white);
     }
 
     &--primary--disabled {
-        color: #ffffff !important;
+        color: var(--u-white-color) !important;
         border-color: $u-type-primary-disabled !important;
         background-color: $u-type-primary-disabled !important;
     }
 
     &--success--disabled {
-        color: #ffffff !important;
+        color: var(--u-white-color) !important;
         border-color: $u-type-success-disabled !important;
         background-color: $u-type-success-disabled !important;
     }
 
     &--error--disabled {
-        color: #ffffff !important;
+        color: var(--u-white-color) !important;
         border-color: $u-type-error-disabled !important;
         background-color: $u-type-error-disabled !important;
     }
 
     &--warning--disabled {
-        color: #ffffff !important;
+        color: var(--u-white-color) !important;
         border-color: $u-type-warning-disabled !important;
         background-color: $u-type-warning-disabled !important;
     }
@@ -519,7 +527,7 @@ function agreeprivacyauthorization(event: any) {
 }
 
 .u-primary-plain-hover {
-    color: #ffffff !important;
+    color: var(--u-white-color) !important;
     background: $u-type-primary-dark !important;
 }
 
@@ -529,22 +537,22 @@ function agreeprivacyauthorization(event: any) {
 }
 
 .u-success-plain-hover {
-    color: #ffffff !important;
+    color: var(--u-white-color) !important;
     background: $u-type-success-dark !important;
 }
 
 .u-warning-plain-hover {
-    color: #ffffff !important;
+    color: var(--u-white-color) !important;
     background: $u-type-warning-dark !important;
 }
 
 .u-error-plain-hover {
-    color: #ffffff !important;
+    color: var(--u-white-color) !important;
     background: $u-type-error-dark !important;
 }
 
 .u-info-plain-hover {
-    color: #ffffff !important;
+    color: var(--u-white-color) !important;
     background: $u-type-info-dark !important;
 }
 
@@ -556,26 +564,26 @@ function agreeprivacyauthorization(event: any) {
 
 .u-primary-hover {
     background: $u-type-primary-dark !important;
-    color: #fff;
+    color: var(--u-white-color);
 }
 
 .u-success-hover {
     background: $u-type-success-dark !important;
-    color: #fff;
+    color: var(--u-white-color);
 }
 
 .u-info-hover {
     background: $u-type-info-dark !important;
-    color: #fff;
+    color: var(--u-white-color);
 }
 
 .u-warning-hover {
     background: $u-type-warning-dark !important;
-    color: #fff;
+    color: var(--u-white-color);
 }
 
 .u-error-hover {
     background: $u-type-error-dark !important;
-    color: #fff;
+    color: var(--u-white-color);
 }
 </style>

package/components/u-calendar/types.ts

@@ -34,15 +34,15 @@ export const CalendarProps = {
     /** 弹窗顶部左右两边的圆角值 */
     borderRadius: { type: [String, Number], default: 20 },
     /** 月份切换按钮箭头颜色 */
-    monthArrowColor: { type: String, default: '#606266' },
+    monthArrowColor: { type: String, default: 'var(--u-content-color)' },
     /** 年份切换按钮箭头颜色 */
-    yearArrowColor: { type: String, default: '#909399' },
+    yearArrowColor: { type: String, default: 'var(--u-tips-color)' },
     /** 默认日期字体颜色 */
-    color: { type: String, default: '#303133' },
+    color: { type: String, default: 'var(--u-main-color)' },
     /** 选中|起始结束日期背景色 */
     activeBgColor: { type: String, default: () => getColor('primary') },
     /** 选中|起始结束日期字体颜色 */
-    activeColor: { type: String, default: '#ffffff' },
+    activeColor: { type: String, default: 'var(--u-white-color)' },
     /** 范围内日期背景色 */
     rangeBgColor: { type: String, default: 'rgba(41,121,255,0.13)' },
     /** 范围内日期字体颜色 */

package/components/u-calendar/u-calendar.vue

@@ -267,12 +267,12 @@ import Calendar from '../../libs/util/calendar';
  * @property {String Number} max-date 最大可选日期(默认当前日期)
  * @property {String Number} 弹窗顶部左右两边的圆角值，单位rpx(默认20)
  * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭日历(默认true)
- * @property {String} month-arrow-color 月份切换按钮箭头颜色(默认#606266)
- * @property {String} year-arrow-color 年份切换按钮箭头颜色(默认#909399)
- * @property {String} color 日期字体的默认颜色(默认#303133)
+ * @property {String} month-arrow-color 月份切换按钮箭头颜色(默认var(--u-content-color))
+ * @property {String} year-arrow-color 年份切换按钮箭头颜色(默认var(--u-tips-color))
+ * @property {String} color 日期字体的默认颜色(默认var(--u-main-color))
  * @property {String} active-bg-color 起始/结束日期按钮的背景色(默认主题色primary)
  * @property {String Number} z-index 弹出时的z-index值(默认10075)
- * @property {String} active-color 起始/结束日期按钮的字体颜色(默认#ffffff)
+ * @property {String} active-color 起始/结束日期按钮的字体颜色(默认var(--u-white-color))
  * @property {String} range-bg-color 起始/结束日期之间的区域的背景颜色(默认rgba(41,121,255,0.13))
  * @property {String} range-color 选择范围内字体颜色(默认主题色primary)
  * @property {String} start-text 起始日期底部的提示文字(默认 '开始')
@@ -650,7 +650,7 @@ function btnFix(show: boolean) {
         width: 100%;
         box-sizing: border-box;
         font-size: 30rpx;
-        background-color: #fff;
+        background-color: var(--u-bg-white);
         color: $u-main-color;
 
         &__text {
@@ -697,7 +697,7 @@ function btnFix(show: boolean) {
         flex-wrap: wrap;
         padding: 6px 0;
         box-sizing: border-box;
-        background-color: #fff;
+        background-color: var(--u-bg-white);
         position: relative;
 
         &--end-date {
@@ -764,7 +764,7 @@ function btnFix(show: boolean) {
             left: 50%;
             top: 50%;
             transform: translate(-50%, -50%);
-            color: #e4e7ed;
+            color: var(--u-border-color);
             z-index: 1;
         }
     }
@@ -775,7 +775,7 @@ function btnFix(show: boolean) {
         align-items: center;
         justify-content: center;
         flex-direction: column;
-        background-color: #fff;
+        background-color: var(--u-bg-white);
         padding: 0 40rpx 30rpx;
         box-sizing: border-box;
         font-size: 24rpx;

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

@@ -197,10 +197,10 @@ function clearTimer() {
     font-size: 36rpx;
     text-align: center;
     line-height: 80rpx;
-    background-color: #fff;
+    background-color: var(--u-bg-white);
     margin: 8rpx 5rpx;
     border-radius: 8rpx;
-    box-shadow: 0 2rpx 0rpx #888992;
+    box-shadow: 0 2rpx 0rpx var(--u-tips-color);
     font-weight: 500;
     justify-content: center;
 }
@@ -220,19 +220,19 @@ function clearTimer() {
     align-items: center;
     border-radius: 8rpx;
     justify-content: center;
-    box-shadow: 0 2rpx 0rpx #888992;
+    box-shadow: 0 2rpx 0rpx var(--u-tips-color);
 }
 
 .u-keyboard-change {
     font-size: 24rpx;
-    box-shadow: 0 2rpx 0rpx #888992;
+    box-shadow: 0 2rpx 0rpx var(--u-tips-color);
     position: absolute;
     width: 96rpx;
     left: 22rpx;
     line-height: 1;
     bottom: 32rpx;
     height: 80rpx;
-    background-color: #ffffff;
+    background-color: var(--u-bg-white);
     @include vue-flex;
     align-items: center;
     border-radius: 8rpx;

package/components/u-card/types.ts

@@ -15,13 +15,13 @@ export const CardProps = {
     /** 标题 */
     title: { type: String, default: '' },
     /** 标题颜色 */
-    titleColor: { type: String, default: '#303133' },
+    titleColor: { type: String, default: 'var(--u-main-color)' },
     /** 标题字体大小，单位rpx */
     titleSize: { type: [Number, String], default: '30' },
     /** 副标题 */
     subTitle: { type: String, default: '' },
     /** 副标题颜色 */
-    subTitleColor: { type: String, default: '#909399' },
+    subTitleColor: { type: String, default: 'var(--u-tips-color)' },
     /** 副标题字体大小，单位rpx */
     subTitleSize: { type: [Number, String], default: '26' },
     /** 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时) */

package/components/u-card/u-card.vue

@@ -101,10 +101,10 @@ import { $u } from '../..';
  * @tutorial https://uviewpro.cn/zh/components/card.html
  * @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
  * @property {String} title 头部左边的标题
- * @property {String} title-color 标题颜色（默认#303133）
+ * @property {String} title-color 标题颜色（默认var(--u-main-color)）
  * @property {String | Number} title-size 标题字体大小，单位rpx（默认30）
  * @property {String} sub-title 头部右边的副标题
- * @property {String} sub-title-color 副标题颜色（默认#909399）
+ * @property {String} sub-title-color 副标题颜色（默认var(--u-tips-color)）
  * @property {String | Number} sub-title-size 副标题字体大小（默认26）
  * @property {Boolean} border 是否显示边框（默认true）
  * @property {String | Number} index 用于标识点击了第几个卡片
@@ -165,7 +165,7 @@ function onFootClick() {
     position: relative;
     overflow: hidden;
     font-size: 28rpx;
-    background-color: #ffffff;
+    background-color: var(--u-bg-white);
     box-sizing: border-box;
 
     &-full {

package/components/u-cell-group/u-cell-group.vue

@@ -54,7 +54,7 @@ defineProps(CellGroupProps);
 }
 
 .u-cell-item-box {
-    background-color: #ffffff;
+    background-color: var(--u-bg-white);
     flex-direction: row;
 }
 </style>

package/components/u-cell-item/u-cell-item.vue

@@ -132,7 +132,7 @@ function onClick() {
     font-size: 28rpx;
     line-height: 54rpx;
     color: $u-content-color;
-    background-color: #fff;
+    background-color: var(--u-bg-white);
     text-align: left;
 }
 
@@ -147,7 +147,7 @@ function onClick() {
 
 .u-cell__right-icon-wrap {
     margin-left: 10rpx;
-    color: #969799;
+    color: var(--u-tips-color);
     font-size: 28rpx;
 }