Color 色彩

注意

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

平台差异说明

App(vue)	App(nvue)	H5	小程序
√	×	√	√

主题色

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

主色

蓝色表示严谨，作为mView主色。

primary
#3c9cff

• dark
  #398ade
• disabled
  #9acafc
• light
  #ecf5ff

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

/* 变量的定义，该部分mView已全局引入，无需您编写 */
$m-primary: #3c9cff;
$m-primary-dark: #398ade;
$m-primary-disabled: #9acafc;
$m-primary-light: #ecf5ff;

/* 在您编写css的地方使用这些变量 */
.page {
    ......
    color: $m-primary;
    ......
}

辅助色

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

success
#4cd964

• dark
  #53c21d
• disabled
  #a9e08f
• light
  #f5fff0

warning
#f0ad4e

• dark
  #f1a532
• disabled
  #f9d39b
• light
  #fdf6ec

error
#dd524d

• dark
  #e45656
• disabled
  #f7b2b2
• light
  #fef0f0

info
#909399

• dark
  #767a82
• disabled
  #c4c6c9
• light
  #f4f4f5

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

/* 变量的定义，该部分mView已全局引入，无需您编写 */
$m-warning: #f0ad4e;
$m-warning-dark: #f1a532;
$m-warning-disabled: #f9d39b;
$m-warning-light: #fdf6ec;

$m-success: #4cd964;
$m-success-dark: #53c21d;
$m-success-disabled: #a9e08f;
$m-success-light: #f5fff0;

$m-error: #dd524d;
$m-error-dark: #e45656;
$m-error-disabled: #f7b2b2;
$m-error-light: #fef0f0;

$m-info: #909399;
$m-info-dark: #767a82;
$m-info-disabled: #c4c6c9;
$m-info-light: #f4f4f5;

/* 在您编写css的地方使用这些变量 */
.page {
    ......
    color: $m-success;
    ......
}

文字颜色

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

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

主要文字
#303133

• 常规文字
  #606266
• 次要文字
  #909193
• 占位文字
  #c0c4cc

/* 变量的定义，该部分mView已全局引入，无需您编写 */
$m-main-color: #303133;
$m-content-color: #606266;
$m-tips-color: #909193;
$m-light-color: #c0c4cc;

/* 在您编写css的地方使用这些变量 */
.page {
    ......
    color: $m-main-color;
    ......
}

背景颜色

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

背景色
#f3f4f6

/* 变量的定义，该部分mView已全局引入，无需您编写 */
$m-bg-color: #f3f4f6;

/* 在您编写css的地方使用这些变量 */
.page {
    ......
    color: $m-bg-color;
    ......
}

边框颜色

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

/* 变量的定义，该部分mView已全局引入，无需您编写 */
$m-border-color: #dadbde;

/* 在您编写css的地方使用这些变量 */
.page {
    ......
    color: $m-border-color;
    ......
}