Color 色彩

注意

所有涉及到主题色的内容均需继承Fast-UI内置的色彩变量，方便统一修改和维护

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

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

平台差异

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序
√	√	√	√	√	√

主题色

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

// 文字颜色
$fu-main-color: #0e6dff;
$fu-tips-color: #909399;
$fu-content-color: #606266;
$fu-light-color: #c0c4cc;

$fu-btn-bg: linear-gradient(87deg, #2da4f9 0%, #0e6dff 100%);              // 全局按钮背景色
$fu-active-bgcolor: #f7f7f7;                                               // 全局active背景色
$fu-active-opacity: .7;                                                    // 全局active透明度
$fu-border-color: #e4e7ed;                                                  // 边框色
$fu-bg-color: #f3f4f6;                                                      // 背景色

$fu-type-primary: linear-gradient(87deg, #2da4f9 0%, #0e6dff 100%);
$fu-type-primary-light: #ecf5ff;
$fu-type-primary-disabled: #a0cfff;
$fu-type-primary-dark: linear-gradient(87deg, #2da4f9 0%, #0e6dff 100%);
$fu-type-warning: #ff9900;
$fu-type-warning-disabled: #fcbd71;
$fu-type-warning-dark: #f29100;
$fu-type-warning-light: #fdf6ec;
$fu-type-success: #19be6b;
$fu-type-success-disabled: #71d5a1;
$fu-type-success-dark: #18b566;
$fu-type-success-light: #dbf1e1;
$fu-type-error: #fa3534;
$fu-type-error-disabled: #fab6b6;
$fu-type-error-dark: #dd6161;
$fu-type-error-light: #fef0f0;
$fu-type-info: #909399;
$fu-type-info-disabled: #c8c9cc;
$fu-type-info-dark: #82848a;
$fu-type-info-light: #f4f4f5;

/* 在您编写css的地方使用这些变量 */
.title {
  color: $fu-type-info;
  ......
}