uview-pro 0.3.16 → 0.4.1

package/components/u-checkbox/u-checkbox.vue

@@ -103,7 +103,7 @@ const iconStyle = computed(() => {
 
 // checkbox内部的勾选图标，如果选中状态，为白色，否则为透明色即可
 const iconColor = computed(() => {
-    return props.modelValue ? '#ffffff' : 'transparent';
+    return props.modelValue ? 'var(--u-white-color)' : 'transparent';
 });
 
 const iconClass = computed(() => {
@@ -234,7 +234,7 @@ defineExpose({
         text-align: center;
         transition-property: color, border-color, background-color;
         font-size: 20px;
-        border: 1px solid #c8c9cc;
+        border: 1px solid var(--u-border-color);
         transition-duration: 0.2s;
 
         /* #ifdef MP-TOUTIAO */
@@ -252,18 +252,18 @@ defineExpose({
         }
 
         &--checked {
-            color: #fff;
+            color: var(--u-white-color);
             background-color: $u-type-primary;
             border-color: $u-type-primary;
         }
 
         &--disabled {
-            background-color: #ebedf0;
-            border-color: #c8c9cc;
+            background-color: var(--u-bg-gray-light);
+            border-color: var(--u-border-color);
         }
 
         &--disabled--checked {
-            color: #c8c9cc !important;
+            color: var(--u-bg-gray-light) !important;
         }
     }
 
@@ -275,7 +275,7 @@ defineExpose({
         font-size: 30rpx;
 
         &--disabled {
-            color: #c8c9cc;
+            color: var(--u-bg-gray-light);
         }
     }
 }

package/components/u-circle-progress/types.ts

@@ -1,6 +1,7 @@
 import { type ExtractPropTypes, type PropType } from 'vue';
 import type { ThemeType } from '../../types/global';
 import { baseProps } from '../common/props';
+import { $u } from '../../libs';
 
 /**
  * circleProgress 环形进度条 Props
@@ -17,12 +18,12 @@ export const CircleProgressProps = {
     /** 底部圆环的颜色（灰色的圆环） */
     inactiveColor: {
         type: String,
-        default: '#ececec'
+        default: () => $u.getColor('dividerColor')
     },
     /** 圆环激活部分的颜色 */
     activeColor: {
         type: String,
-        default: '#19be6b'
+        default: 'var(--u-type-success)'
     },
     /** 圆环线条的宽度，单位rpx */
     borderWidth: {
@@ -47,7 +48,7 @@ export const CircleProgressProps = {
     /** 整个圆环进度区域的背景色 */
     bgColor: {
         type: String,
-        default: '#ffffff'
+        default: 'var(--u-bg-white)'
     }
 };
 

package/components/u-circle-progress/u-circle-progress.vue

@@ -86,14 +86,14 @@ import { canvas2d } from '../../libs/util/canvas-2d';
  * @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度条。注意：此组件的percent值只能动态增加，不能动态减少。
  * @tutorial https://uviewpro.cn/zh/components/circleProgress.html
  * @property {String Number} percent 圆环进度百分比值，为数值类型，0-100
- * @property {String} inactive-color 圆环的底色，默认为灰色(该值无法动态变更)（默认#ececec）
- * @property {String} active-color 圆环激活部分的颜色(该值无法动态变更)（默认#19be6b）
+ * @property {String} inactive-color 圆环的底色，默认为灰色(该值无法动态变更)（默认var(--u-divider-color)）
+ * @property {String} active-color 圆环激活部分的颜色(该值无法动态变更)（默认var(--u-type-success)）
  * @property {String Number} width 整个圆环组件的宽度，高度默认等于宽度值，单位rpx（默认200）
  * @property {String Number} border-width 圆环的边框宽度，单位rpx（默认14）
  * @property {String Number} duration 整个圆环执行一圈的时间，单位ms（默认呢1500）
  * @property {String} type 如设置，active-color值将会失效
  * @property {String} bg-color 整个组件背景颜色，默认为白色
- * @example <u-circle-progress active-color="#2979ff" :percent="80"></u-circle-progress>
+ * @example <u-circle-progress active-color="var(--u-type-primary)" :percent="80"></u-circle-progress>
  */
 const props = defineProps(CircleProgressProps);
 

package/components/u-city-select/u-city-select.vue

@@ -8,7 +8,7 @@
         :mask="true"
         :closeable="true"
         :safe-area-inset-bottom="true"
-        close-icon-color="#ffffff"
+        close-icon-color="var(--u-white-color)"
         :z-index="uZIndex"
         :maskCloseAble="props.maskCloseAble"
         @close="close"

package/components/u-collapse/types.ts

@@ -9,7 +9,7 @@ import { baseProps } from '../common/props';
  * @property {Object} bodyStyle 主体自定义样式，对象形式
  * @property {Object} itemStyle 每一个item的样式，对象形式
  * @property {Boolean} arrow 是否显示标题右侧的箭头（默认true）
- * @property {String} arrowColor 标题右侧箭头的颜色（默认#909399）
+ * @property {String} arrowColor 标题右侧箭头的颜色（默认var(--u-tips-color)）
  * @property {String} hoverClass 样式类名，按下时有效（默认u-hover-class）
  */
 export const CollapseProps = {
@@ -25,7 +25,7 @@ export const CollapseProps = {
     /** 是否显示右侧的箭头 */
     arrow: { type: Boolean, default: true },
     /** 箭头的颜色 */
-    arrowColor: { type: String, default: '#909399' },
+    arrowColor: { type: String, default: 'var(--u-tips-color)' },
     /** 标题部分按压时的样式类，"none"为无效果 */
     hoverClass: { type: String, default: 'u-hover-class' }
 };

package/components/u-collapse/u-collapse.vue

@@ -28,7 +28,7 @@ import { $u, useParent } from '../../';
  * @tutorial https://uviewpro.cn/zh/components/collapse.html
  * @property {Boolean} accordion 是否手风琴模式（默认true）
  * @property {Boolean} arrow 是否显示标题右侧的箭头（默认true）
- * @property {String} arrow-color 标题右侧箭头的颜色（默认#909399）
+ * @property {String} arrow-color 标题右侧箭头的颜色（默认var(--u-tips-color)）
  * @property {Object} head-style 标题自定义样式，对象形式
  * @property {Object} body-style 主体自定义样式，对象形式
  * @property {String} hover-class 样式类名，按下时有效（默认u-hover-class）

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

@@ -132,7 +132,7 @@ function init() {
     if (parentExposed.value?.props) {
         headStyle.value = parentExposed.value.props.headStyle || {};
         bodyStyle.value = parentExposed.value.props.bodyStyle || {};
-        arrowColor.value = parentExposed.value.props.arrowColor || '#909399';
+        arrowColor.value = parentExposed.value.props.arrowColor || 'var(--u-tips-color)';
         hoverClass.value = parentExposed.value.props.hoverClass || 'u-hover-class';
         itemStyle.value = parentExposed.value.props.itemStyle || {};
     }

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

@@ -110,7 +110,7 @@ const emit = defineEmits<{
 const computeColor = computed(() => {
     if (props.color) return props.color;
     // 如果是无主题，就默认使用content-color
-    else if (props.type === 'none') return '#606266';
+    else if (props.type === 'none') return 'var(--u-content-color)';
     else return props.type;
 });
 
@@ -120,7 +120,7 @@ const computeColor = computed(() => {
 const textStyle = computed(() => {
     const style: Record<string, any> = {};
     if (props.color) style.color = props.color;
-    else if (props.type === 'none') style.color = '#606266';
+    else if (props.type === 'none') style.color = 'var(--u-content-color)';
     style.fontSize = props.fontSize + 'rpx';
     return style;
 });

package/components/u-config-provider/types.ts

@@ -0,0 +1,34 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
+import { configProvider } from '../../libs';
+import type { Theme } from '../../types/global';
+
+export const ConfigProviderProps = {
+    ...baseProps,
+    /**
+     * 主题风格，可选值：
+     * - 'light': 强制亮色模式
+     * - 'dark': 强制暗黑模式
+     * - 'auto': 自动跟随系统设置（默认）
+     */
+    darkMode: {
+        type: String as PropType<'light' | 'dark' | 'auto'>,
+        default: 'auto'
+    },
+    /**
+     * 当前主题名称（用于多主题切换）
+     */
+    currentTheme: {
+        type: String,
+        default: () => configProvider.getCurrentTheme()?.name ?? 'uviewpro'
+    },
+    /**
+     * 自定义主题列表
+     */
+    themes: {
+        type: Array as PropType<Theme[]>,
+        default: () => configProvider.getThemes()
+    }
+};
+
+export type ConfigProviderProps = ExtractPropTypes<typeof ConfigProviderProps>;

package/components/u-config-provider/u-config-provider.vue

@@ -0,0 +1,141 @@
+<template>
+    <view :class="['u-config-provider', `u-theme-${darkMode}`, customClass]" :style="mergedThemeStyle">
+        <slot />
+    </view>
+</template>
+
+<script lang="ts">
+/**
+ * u-config-provider
+ *
+ * 说明（简要）：
+ * - 初始化场景（推荐在应用入口执行）：使用 `useTheme().initTheme(themes)` 进行一次性初始化与全局设置（例如在 `main.ts` 或 `App.vue` 中）。
+ * - 组件/页面场景（推荐）：使用 `useTheme()` 组合式函数在组件内部读取响应式 `currentTheme`、`themes`、`darkMode` 并通过 `setTheme()` 和 `setDarkMode()` 切换主题/模式。
+ *
+ * 该组件的行为：
+ * - 如果在挂载时传入 `themes`，会调用 `configProvider.init(themes)`
+ * - 如果传入 `currentTheme`，会优先设置当前主题
+ * - 如果传入 `darkMode`，会设置当前的暗黑模式状态，同时在 document 上添加 `u-theme-dark` 或 `u-theme-light` 类名
+ *
+ * 详尽说明请参考：`docs/config-provider-usage.md`
+ */
+export default {
+    name: 'u-config-provider',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script lang="ts" setup>
+import { computed, watch, onMounted } from 'vue';
+import { ConfigProviderProps } from './types';
+import { $u, configProvider } from '../../libs';
+import { useTheme } from '../../libs/hooks/useTheme';
+
+const props = defineProps(ConfigProviderProps);
+
+const emit = defineEmits<{
+    'theme-change': [themeName: string];
+    'mode-change': [mode: 'light' | 'dark'];
+}>();
+
+// 计算当前的主题模式（亮色/暗黑）
+const darkMode = computed(() => (configProvider.isInDarkMode() ? 'dark' : 'light'));
+
+const bootstrapTheme = () => {
+    // 如果已经初始化过主题，不再重复初始化，只更新 props 相关配置
+    const existingThemes = configProvider.getThemes();
+    if (existingThemes.length > 0) {
+        // 已初始化，只更新当前主题和暗黑模式
+        if (props.currentTheme) {
+            configProvider.setTheme(props.currentTheme as string);
+        }
+        if (props.darkMode) {
+            configProvider.setDarkMode(props.darkMode);
+        }
+        return;
+    }
+
+    // 未初始化，进行初始化
+    if (props.themes && props.themes.length) {
+        configProvider.init(props.themes, props.currentTheme as any);
+    } else {
+        // 使用 useTheme 的 initTheme，它会处理默认主题
+        const { initTheme } = useTheme();
+        initTheme(undefined, props.currentTheme as any);
+    }
+
+    if (props.currentTheme) {
+        configProvider.setTheme(props.currentTheme as string);
+    }
+    if (props.darkMode) {
+        configProvider.setDarkMode(props.darkMode);
+    }
+};
+
+// 当传入自定义 themes 时，初始化全局 configProvider（覆盖已有）
+onMounted(() => {
+    bootstrapTheme();
+});
+
+// 监听外部 props 变化（如果上层修改 prop）
+watch(
+    () => props.themes,
+    val => {
+        if (val && val.length) {
+            configProvider.init(val, props.currentTheme as any);
+        }
+    },
+    { deep: true }
+);
+
+watch(
+    () => props.currentTheme,
+    val => {
+        if (val) {
+            configProvider.setTheme(val);
+        }
+    }
+);
+
+watch(
+    () => props.darkMode,
+    val => {
+        if (val && val !== configProvider.getDarkMode()) {
+            configProvider.setDarkMode(val);
+            emit('mode-change', darkMode.value);
+        }
+    }
+);
+
+// 监听全局主题变更并触发事件
+watch(
+    () => configProvider.currentThemeRef.value,
+    (val, oldVal) => {
+        if (val && val.name !== (oldVal as any)?.name) {
+            emit('theme-change', val.name);
+        }
+    },
+    { immediate: true }
+);
+
+// 监听暗黑模式变更并触发事件
+watch(
+    () => configProvider.darkModeRef.value,
+    () => {
+        emit('mode-change', darkMode.value);
+    }
+);
+
+// 计算合并样式（作为局部 fallback），configProvider 已经会把变量注入到 document 上
+const mergedThemeStyle = computed(() => {
+    return $u.toStyle(configProvider.cssVarsRef.value, props.customStyle);
+});
+</script>
+
+<style lang="scss" scoped></style>

package/components/u-count-down/types.ts

@@ -16,19 +16,19 @@ export const CountDownProps = {
     /** 分隔符的大小，单位rpx */
     separatorSize: { type: [Number, String] as PropType<number | string>, default: 30 },
     /** 分隔符颜色 */
-    separatorColor: { type: String, default: '#303133' },
+    separatorColor: { type: String, default: 'var(--u-main-color)' },
     /** 字体颜色 */
-    color: { type: String, default: '#303133' },
+    color: { type: String, default: 'var(--u-main-color)' },
     /** 字体大小，单位rpx */
     fontSize: { type: [Number, String] as PropType<number | string>, default: 30 },
     /** 背景颜色 */
-    bgColor: { type: String, default: '#fff' },
+    bgColor: { type: String, default: 'var(--u-bg-white)' },
     /** 数字框高度，单位rpx */
     height: { type: [Number, String] as PropType<number | string>, default: 'auto' },
     /** 是否显示数字框 */
     showBorder: { type: Boolean, default: false },
     /** 边框颜色 */
-    borderColor: { type: String, default: '#303133' },
+    borderColor: { type: String, default: 'var(--u-main-color)' },
     /** 是否显示秒 */
     showSeconds: { type: Boolean, default: true },
     /** 是否显示分钟 */

package/components/u-count-down/u-count-down.vue

@@ -93,13 +93,13 @@ import { $u } from '../../';
  * @property {Boolean} autoplay 是否自动开始倒计时，如果为false，需手动调用开始方法。见官网说明（默认true）
  * @property {String} separator 分隔符，colon为英文冒号，zh为中文（默认colon）
  * @property {String | Number} separator-size 分隔符的字体大小，单位rpx（默认30）
- * @property {String} separator-color 分隔符的颜色（默认#303133）
+ * @property {String} separator-color 分隔符的颜色（默认var(--u-main-color)）
  * @property {String | Number} font-size 倒计时字体大小，单位rpx（默认30）
  * @property {Boolean} show-border 是否显示倒计时数字的边框（默认false）
  * @property {Boolean} hide-zero-day 当"天"的部分为0时，隐藏该字段 （默认true）
- * @property {String} border-color 数字边框的颜色（默认#303133）
- * @property {String} bg-color 倒计时数字的背景颜色（默认#ffffff）
- * @property {String} color 倒计时数字的颜色（默认#303133）
+ * @property {String} border-color 数字边框的颜色（默认var(--u-main-color)）
+ * @property {String} bg-color 倒计时数字的背景颜色（默认var(--u-bg-white)）
+ * @property {String} color 倒计时数字的颜色（默认var(--u-main-color)）
  * @property {String | Number} height 数字高度值(宽度等同此值)，设置边框时看情况是否需要设置此值，单位rpx（默认auto）
  * @property {Boolean} show-days 是否显示倒计时的"天"部分（默认true）
  * @property {Boolean} show-hours 是否显示倒计时的"时"部分（默认true）

package/components/u-count-to/types.ts

@@ -22,7 +22,7 @@ export const CountToProps = {
     /** 十进制分割符号 */
     decimal: { type: [Number, String] as PropType<number | string>, default: '.' },
     /** 字体颜色 */
-    color: { type: String, default: '#303133' },
+    color: { type: String, default: 'var(--u-main-color)' },
     /** 字体大小 */
     fontSize: { type: [Number, String] as PropType<number | string>, default: 50 },
     /** 是否加粗字体 */

package/components/u-count-to/u-count-to.vue

@@ -46,7 +46,7 @@ import { $u } from '../../';
  * @property {String | Number} decimals 要显示的小数位数，见官网说明（默认0）
  * @property {Boolean} use-easing 滚动结束时，是否缓动结尾，见官网说明（默认true）
  * @property {String} separator 千位分隔符，见官网说明
- * @property {String} color 字体颜色（默认#303133）
+ * @property {String} color 字体颜色（默认var(--u-main-color)）
  * @property {String | Number} font-size 字体大小，单位rpx（默认50）
  * @property {Boolean} bold 字体是否加粗（默认false）
  * @event {Function} end 数值滚动到目标值时触发

package/components/u-divider/types.ts

@@ -11,15 +11,15 @@ export const DividerProps = {
     /** 单一边divider横线的宽度(数值)，单位rpx。或者百分比 */
     halfWidth: { type: [Number, String] as PropType<number | string>, default: 150 },
     /** divider横线的颜色，如设置 */
-    borderColor: { type: String, default: '#dcdfe6' },
+    borderColor: { type: String, default: 'var(--u-border-color)' },
     /** 主题色，可以是primary|info|success|warning|error之一值 */
     type: { type: String as PropType<ThemeType>, default: 'primary' },
     /** 文字颜色 */
-    color: { type: String, default: '#909399' },
+    color: { type: String, default: 'var(--u-tips-color)' },
     /** 文字大小，单位rpx */
     fontSize: { type: [Number, String] as PropType<number | string>, default: 26 },
     /** 整个divider的背景颜色 */
-    bgColor: { type: String, default: '#ffffff' },
+    bgColor: { type: String, default: 'var(--u-bg-white)' },
     /** 整个divider的高度单位rpx */
     height: { type: [Number, String] as PropType<number | string>, default: 'auto' },
     /** 上边距 */

package/components/u-divider/u-divider.vue

@@ -60,17 +60,17 @@ import { $u } from '../../';
  * @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
  * @tutorial https://uviewpro.cn/zh/components/divider.html
  * @property {String Number} half-width 文字左或右边线条宽度，数值或百分比，数值时单位为rpx
- * @property {String} border-color 线条颜色，优先级高于type（默认#dcdfe6）
- * @property {String} color 文字颜色（默认#909399）
+ * @property {String} border-color 线条颜色，优先级高于type（默认var(--u-border-color)）
+ * @property {String} color 文字颜色（默认var(--u-tips-color)）
  * @property {String Number} fontSize 字体大小，单位rpx（默认26）
- * @property {String} bg-color 整个divider的背景颜色（默认呢#ffffff）
+ * @property {String} bg-color 整个divider的背景颜色（默认呢var(--u-bg-white)）
  * @property {String Number} height 整个divider的高度，单位rpx（默认40）
  * @property {String} type 将线条设置主题色（默认primary）
  * @property {Boolean} useSlot 是否使用slot传入内容，如果不传入，中间不会有空隙（默认true）
  * @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0）
  * @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
  * @event {Function} click divider组件被点击时触发
- * @example <u-divider color="#fa3534">长河落日圆</u-divider>
+ * @example <u-divider color="var(--u-type-error)">长河落日圆</u-divider>
  */
 const props = defineProps(DividerProps);
 

package/components/u-dropdown/u-dropdown.vue

@@ -16,7 +16,7 @@
                         class="u-dropdown__menu__item__text"
                         :style="{
                             color: item.disabled
-                                ? '#c0c4cc'
+                                ? 'var(--u-light-color)'
                                 : index === current || highlightIndex == index
                                   ? activeColor
                                   : inactiveColor,
@@ -34,7 +34,7 @@
                             :custom-style="{ display: 'flex' }"
                             :name="menuIcon"
                             :size="$u.addUnit(menuIconSize)"
-                            :color="index === current || highlightIndex == index ? activeColor : '#c0c4cc'"
+                            :color="index === current || highlightIndex == index ? activeColor : 'var(--u-light-color)'"
                         ></u-icon>
                     </view>
                 </view>
@@ -84,7 +84,7 @@ import { DropdownProps } from './types';
  * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
  * @tutorial https://uviewpro.cn/zh/components/dropdown.html
  * @property {String} active-color 标题和选项卡选中的颜色（默认主题色primary）
- * @property {String} inactive-color 标题和选项卡未选中的颜色（默认#606266）
+ * @property {String} inactive-color 标题和选项卡未选中的颜色（默认var(--u-content-color)）
  * @property {Boolean} close-on-click-mask 点击遮罩是否关闭菜单（默认true）
  * @property {Boolean} close-on-click-self 点击当前激活项标题是否关闭菜单（默认true）
  * @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）

package/components/u-empty/types.ts

@@ -11,9 +11,9 @@ export const EmptyProps = {
     /** 提示文字 */
     text: { type: String, default: '' },
     /** 文字颜色 */
-    color: { type: String, default: '#c0c4cc' },
+    color: { type: String, default: 'var(--u-light-color)' },
     /** 图标的颜色 */
-    iconColor: { type: String, default: '#c0c4cc' },
+    iconColor: { type: String, default: 'var(--u-light-color)' },
     /** 图标的大小 */
     iconSize: { type: [String, Number] as PropType<string | number>, default: 120 },
     /** 文字大小，单位rpx */

package/components/u-empty/u-empty.vue

@@ -43,7 +43,7 @@ import { $u } from '../../';
  * empty 内容为空
  * @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 我们精心挑选了十几个场景的图标，方便您使用。
  * @tutorial https://uviewpro.cn/zh/components/empty.html
- * @property {String} color 文字颜色（默认#c0c4cc）
+ * @property {String} color 文字颜色（默认var(--u-light-color)）
  * @property {String} text 文字提示（默认“无内容”）
  * @property {String} src 自定义图标路径，如定义，mode参数会失效
  * @property {String Number} font-size 提示文字的大小，单位rpx（默认28）

package/components/u-field/types.ts

@@ -28,15 +28,15 @@ export const FieldProps = {
     labelAlign: { type: String as PropType<InputAlign>, default: 'left' },
     /** 输入框内容对齐方式（默认left） */
     inputAlign: { type: String as PropType<InputAlign>, default: 'left' },
-    /** 左边通过icon配置的图标的颜色（默认#606266） */
-    iconColor: { type: String, default: '#606266' },
+    /** 左边通过icon配置的图标的颜色（默认var(--u-content-color)） */
+    iconColor: { type: String, default: 'var(--u-content-color)' },
     /** 是否自动增高输入区域，type为textarea时有效（默认true） */
     autoHeight: { type: Boolean, default: true },
     /** 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息 */
     errorMessage: { type: [String, Boolean] as PropType<string | boolean>, default: '' },
     /** 输入框的提示文字 */
     placeholder: String,
-    /** placeholder的样式(内联样式，字符串)，如"color: #ddd" */
+    /** placeholder的样式(内联样式，字符串)，如"color: var(--u-divider-color)" */
     placeholderStyle: String,
     /** 是否自动获得焦点（默认false） */
     focus: Boolean,

package/components/u-field/u-field.vue

@@ -74,7 +74,7 @@
                     :size="props.clearSize"
                     v-if="props.clearable && props.modelValue != '' && focused"
                     name="close-circle-fill"
-                    color="#c0c4cc"
+                    color="var(--u-light-color)"
                     class="u-clear-icon"
                     @click="onClear"
                 />
@@ -83,7 +83,7 @@
                     v-if="props.rightIcon"
                     @click="rightIconClick"
                     :name="props.rightIcon"
-                    color="#c0c4cc"
+                    color="var(--u-light-color)"
                     :style="[rightIconStyle]"
                     size="26"
                     class="u-arror-right"
@@ -138,11 +138,11 @@ import { $u } from '../..';
  * @property {String} input-align 输入框内容对齐方式（默认left）
  * @property {Boolean} border-bottom 是否显示field的下边框（默认true）
  * @property {Boolean} border-top 是否显示field的上边框（默认false）
- * @property {String} icon-color 左边通过icon配置的图标的颜色（默认#606266）
+ * @property {String} icon-color 左边通过icon配置的图标的颜色（默认var(--u-content-color)）
  * @property {Boolean} auto-height 是否自动增高输入区域，type为textarea时有效（默认true）
  * @property {String Boolean} error-message 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
  * @property {String} placeholder 输入框的提示文字
- * @property {String} placeholder-style placeholder的样式(内联样式，字符串)，如"color: #ddd"
+ * @property {String} placeholder-style placeholder的样式(内联样式，字符串)，如"color: var(--u-divider-color)"
  * @property {Boolean} focus 是否自动获得焦点（默认false）
  * @property {Boolean} fixed 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true（默认false）
  * @property {Boolean} disabled 是否不可输入（默认false）
@@ -171,11 +171,11 @@ const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'confirm', 'righ
  * @property {number|string} labelWidth label的宽度，单位rpx（默认130）
  * @property {string} labelAlign label的文字对齐方式（默认left）
  * @property {string} inputAlign 输入框内容对齐方式（默认left）
- * @property {string} iconColor 左边通过icon配置的图标的颜色（默认#606266）
+ * @property {string} iconColor 左边通过icon配置的图标的颜色（默认var(--u-content-color)）
  * @property {boolean} autoHeight 是否自动增高输入区域，type为textarea时有效（默认true）
  * @property {string|boolean} errorMessage 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
  * @property {string} placeholder 输入框的提示文字
- * @property {string} placeholderStyle placeholder的样式(内联样式，字符串)，如"color: #ddd"
+ * @property {string} placeholderStyle placeholder的样式(内联样式，字符串)，如"color: var(--u-divider-color)"
  * @property {boolean} focus 是否自动获得焦点（默认false）
  * @property {boolean} fixed 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true（默认false）
  * @property {boolean} disabled 是否不可输入（默认false）

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

@@ -390,7 +390,7 @@ defineExpose({
     font-size: 28rpx;
     color: $u-main-color;
     box-sizing: border-box;
-    // line-height: $u-form-item-height;
+    // line-height: 70rpx;
     flex-direction: column;
 
     &__border-bottom--error:after {

package/components/u-full-screen/u-full-screen.vue

@@ -91,7 +91,7 @@ function closeModal() {
 @import '../../libs/css/style.components.scss';
 
 .u-full-content {
-    background-color: #00c777;
+    background-color: var(--u-type-success);
 }
 
 .u-update-content {

package/components/u-gap/u-gap.vue

@@ -24,11 +24,11 @@ import { $u } from '../../';
  * gap 间隔槽
  * @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
  * @tutorial https://uviewpro.cn/zh/components/gap.html
- * @property {String} bg-color 背景颜色（默认#f3f4f6）
+ * @property {String} bg-color 背景颜色（默认var(--u-bg-color)）
  * @property {String Number} height 分割槽高度，单位rpx（默认30）
  * @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0）
  * @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
- * @example <u-gap height="80" bg-color="#bbb"></u-gap>
+ * @example <u-gap height="80" bg-color="var(--u-light-color)"></u-gap>
  */
 const props = defineProps(GapProps);
 

package/components/u-grid-item/types.ts

@@ -8,7 +8,7 @@ import { baseProps } from '../common/props';
 export const GridItemProps = {
     ...baseProps,
     /** 背景颜色 */
-    bgColor: { type: String, default: '#ffffff' },
+    bgColor: { type: String, default: 'var(--u-bg-white)' },
     /** 点击时返回的index */
     index: { type: [Number, String] as PropType<string | number>, default: '' }
 };

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

@@ -43,7 +43,7 @@ import { $u, useChildren } from '../..';
  * gridItem 宫格项
  * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。搭配u-grid使用
  * @tutorial https://uviewpro.cn/zh/components/grid.html
- * @property {String} bg-color 宫格的背景颜色（默认#ffffff）
+ * @property {String} bg-color 宫格的背景颜色（默认var(--u-bg-white)）
  * @property {String|Number} index 点击宫格时，返回的值
  * @property {Object} custom-style 自定义样式，对象形式
  * @event {Function} click 点击宫格触发
@@ -88,7 +88,7 @@ defineExpose({ click });
 
 .u-grid-item {
     box-sizing: border-box;
-    background: #fff;
+    background-color: var(--u-bg-white);
     @include vue-flex;
     align-items: center;
     justify-content: center;
@@ -102,7 +102,7 @@ defineExpose({ click });
 }
 
 .u-grid-item-hover {
-    background: #f7f7f7 !important;
+    background: var(--u-bg-gray-light) !important;
 }
 
 .u-grid-marker-box {