LuLu UI Edge版中文文档 » 组件颜色

组件颜色

颜色（文字、按钮）

颜色变量

默认的颜色变量名称如下所示：

/* 基础颜色变量 */
--ui-blue: #2a80eb;
--ui-dark-blue: #0057c3;
--ui-dark: #4c5161;
--ui-gray: #a2a9b6;
--ui-dark-gray: #b6bbc6;
--ui-light: #f7f9fa;
--ui-white: #ffffff;
--ui-green: #1cad70;
--ui-orange: #f59b00;
--ui-red: #eb4646;
/* hover 的颜色 */
--ui-list-hover: #f0f7ff;
/* selected 的颜色 */
--ui-list-selected: #e0f0ff;
/* disabled 禁用色 */
--ui-disabled: #ccd0d7;
/* 边框颜色 */
--ui-border: #d0d0d5;
/* 深一点的边框颜色 */
--ui-dark-border: #ababaf;
/* 浅一点的边框颜色 */
--ui-light-border: #ededef;

控制文字的颜色

如果有引入下面的CSS：

<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/color.css">

或者：

import 'lu2/theme/edge/css/common/color.css';

则可以直接使用下面高亮的类名显示颜色：

<span class="dark">主色(深色)</span>
<span class="light">浅色</span>
<span class="gray">灰色(主色灰)</span>
<span class="blue">蓝色</span>
<span class="red">红色</span>
<span class="orange">橘色</span>
<span class="green">绿色</span>
<span class="grey">灰色(边框灰)</span>
<span class="white">白色</span>

其中blue是默认的文字链接色，而深蓝色则是hover的颜色，其他情况，此深蓝色并不出现。

<a href>文字链接</a>

文字链接

有些链接文字默认是主色，则hover时候自动会变成blue蓝色。

<a href class="dark">文字链接默认主色</a>

文字链接默认主色

其他颜色如red, green可以出现在表示状态的静态描述文字上。例如：

<span class="red">审核没有通过</span>

<span class="green">审核成功</span>

审核没有通过
审核成功