Color 色彩

uView经过大量调试和研究，得出一套专有的调色板，在各个组件内部，使用统一的配色，为您的产品带来统一又鲜明的视觉效果。

注意

uView为了更好编写css，使用了scss预处理器，使用uView之前，请确认您的Hbuilder X已经安装了scss预处理器，一般情况下，相信您已经安装了。如果没有安装， 请在 Hbuilder X->工具->插件安装 中找到找到”scss/sass编译”安装即可，安装完毕如果不生效，请重启Hbuilder X。

平台差异说明

主题色

primary，success，error，warning，info是uView的主题色，他们给人在视觉感受上分别对应于蓝色，绿色，红色，黄色，灰色。 而他们又有对应的disabled、dark和light状态，分别表示对应的禁止，加深和变浅的对应颜色。举例uView的button组件来说：

1. 设置type参数为primary时，按钮显示蓝色。
2. 按钮被按下时，使用的是primary的加深颜色，也即dark状态。
3. 按钮设置为镂空状态(plain为true)时，背景色为primary的变浅颜色，也即也即light状态。
4. 按钮处于禁止状态时，使用的是primary的稍浅颜色，也即disabled状态。

主色

蓝色作为uView主色调，表示一种鲜明，积极的态度

Primary

2979ff

Dark

2b85e4

Disabled

a0cfff

Light

ecf5ff

我们在全局样式中，通过scss提供了对应的颜色变量名，方便您在任何可写css的地方，调用这些变量，如下：

/* 变量的定义，该部分uView已全局引入，无需您编写 */
$u-type-primary: #2979ff;
$u-type-primary-light: #ecf5ff;
$u-type-primary-disabled: #a0cfff;
$u-type-primary-dark: #2b85e4;
/* 在您编写css的地方使用这些变量 */
.title {
    color: $u-type-primary;
    ......
}

辅助色

除了主色外的场景色，需要在不同的场景中使用，如绿色代表成功，红色代表错误，黄色代表警示。

Error

fa3534

Dark

dd6161

Disabled

fab6b6

Light

fef0f0

Warning

ff9900

Dark

f29100

Disabled

fcbd71

Light

fdf6ec

Success

19be6b

Dark

18b566

Disabled

71d5a1

Light

dbf1e1

Info

909399

Dark

82848a

Disabled

c8c9cc

Light

f4f4f5

我们在全局样式中，通过scss提供了对应的颜色变量名，方便您在任何可写css的地方，调用这些变量，如下：

/* 变量的定义，该部分uView已全局引入，无需您编写 */
$u-type-warning: #ff9900;
$u-type-warning-disabled: #fcbd71;
$u-type-warning-dark: #f29100;
$u-type-warning-light: #fdf6ec;
$u-type-success: #19be6b;
$u-type-success-disabled: #71d5a1;
$u-type-success-dark: #18b566;
$u-type-success-light: #dbf1e1;
$u-type-error: #fa3534;
$u-type-error-disabled: #fab6b6;
$u-type-error-dark: #dd6161;
$u-type-error-light: #fef0f0;
$u-type-info: #909399;
$u-type-info-disabled: #c8c9cc;
$u-type-info-dark: #82848a;
$u-type-info-light: #f4f4f5;
/* 在您编写css的地方使用这些变量 */
.title {
    color: $u-type-info;
    ......
}

文字颜色

uView中，分别提炼了4种用于文字颜色，分别是：主要文字、常规文字、次要文字、占位文字颜色。

• 主要文字颜色一般用于内容的标题等，如新闻列表的标题
• 常规文字颜色一般用于内容的主体，如新闻列表的概要
• 次要文字颜色一般用于内容的提示部分，如新闻列表底部的时间，评论数量的提示文字
• 占位文字颜色属于更浅的灰色，看场景选择使用

主要文字

303133

常规文字

606266

次要文字

909399

占位文字

c0c4cc

/* 变量的定义，该部分uView已全局引入，无需您编写 */
$u-main-color: #303133;
$u-content-color: #606266;
$u-tips-color: #909399;
$u-light-color: #c0c4cc;
/* 在您编写css的地方使用这些变量 */
.title {
    color: $u-main-color;
}

背景颜色

uView中，定义了一个背景颜色，如下：

背景颜色

f3f4f6

我们在全局样式中，通过scss提供了对应的颜色变量名，方便您在任何可写css的地方，调用这个变量，如下：

/* 变量的定义，该部分uView已全局引入，无需您编写 */
$u-bg-color: #f3f4f6;
/* 在您编写css的地方使用这些变量 */
.title {
    color: $u-bg-color;
}

边框颜色

uView自定义了一个边框的颜色，值为#e4e7ed，如果想使用，如下：

/* 变量的定义，该部分uView已全局引入，无需您编写 */
$u-border-color: #e4e7ed;
/* 在您编写css的地方使用这个变量 */
.item {
    border: 1px solid $u-border-color;
}