颜色转换

RGB转十六进制Hex rgbToHex(rgb)

该函数可以将一个RGB颜色值转换成一个Hex的十六进制颜色值

• rgb <String> RGB颜色值，如rgb(230, 231, 233)

uni.$m.color.rgbToHex('rgba(230, 231, 233)')

十六进制Hex转RGB hexToRgb(hex)

该函数可以将一个Hex的十六进制颜色值转换成一个RGB颜色值

• hex <String> HEx颜色值，如#0afdce

uni.$m.color.hexToRgb('#0afdce')

颜色渐变 colorGradient(startColor, endColor, step)

该函数实现两个颜色值之间等分取值，返回一个数组，元素为十六进制形式的颜色值，数组长度为step值。 例如：colorGradient('rgb(250, 250, 250)', 'rgb(252, 252, 252)', 3)，得到的结果为["#fafafa", "#fafafa", "#fbfbfb"]

• startColor <String> 开始颜色值，可以是HEX或者RGB颜色值，如#0afdce或者rgb(120, 130, 150)
• endColor <String> 结束颜色值，可以是HEX或者RGB颜色值，如#0afdce或者rgb(120, 130, 150)
• step <Number> 均分值，把开始值和结束值平均分成多少份

uni.$m.color.colorGradient('rgb(250,250,250)', 'rgb(252,252,252)', 3)

颜色透明度 colorToRgba(color, opacity = 0.3)

该函数可以接受一个十六进制或者rgb格式的颜色值(不能接受命名式颜色格式，比如white)，返回此颜色的rgba格式值，如下：

• color <String> 颜色值，只能hex或者rgba格式
• opacity <Number> 不透明度值，取值为0-1之间

uni.$m.color.colorToRgba('#000000', 0.35)
uni.$m.color.colorToRgba('rgb(255, 180, 0)', 0.4)

主题配色

theme.scss文件变量

/* 主色 */
$m-main-color: #303133;
$m-content-color: #606266;
$m-tips-color: #909193;
$m-light-color: #c0c4cc;
$m-border-color: #dadbde;
$m-bg-color: #f3f4f6;
$m-disabled-color: #c8c9cc;

/* 行为相关颜色 */
$m-primary: #3c9cff;
$m-primary-dark: #398ade;
$m-primary-disabled: #9acafc;
$m-primary-light: #ecf5ff;

$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;

uni.$m.config.color

{
    'm-primary': '#2979ff',
    'm-warning': '#ff9900',
    'm-success': '#19be6b',
    'm-error': '#fa3534',
    'm-info': '#909399',
    'm-main-color': '#303133',
    'm-content-color': '#606266',
    'm-tips-color': '#909399',
    'm-light-color': '#c0c4cc',
    'm-bg-color': '#f3f4f6'
}