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

颜色与主题

主要颜色

颜色变量

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

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

主题定制

除了颜色，还有以下全局变量可供设置：

/* 透明度 */
--ui-opacity: .4;
/* 圆角变量 */
--ui-radius: .25rem;
/* 基础字号 */
--ui-font: 1rem;
/* 动画时间 */
--ui-animate-time: .2s;
/* 基本尺寸单元 */
--ui-line-height: 1.375rem;
--ui-component-height: 2.25rem;

如何定制？

如果 CSS 是在业务代码中，修改 variables.css 或包含全局变量的 CSS 文件。

如果 CSS 不方便修改，直接在业务 CSS 代码中重置。

无障碍访问支持

本主题天然对用户暗黑模式、减弱动画和高对比度模式进行了支持，以增强用户体验。

使用方式如下：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/scheme-dark.css" media="(prefers-color-scheme: dark)">

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/contrast-more.css" media="(prefers-contrast: more)">

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/reduced-motion.css" media="prefers-reduced-motion">