介绍
使用 css 变量定制主题
使用
需要在项目中手动引入
import "@minij/lemon/css/themes/default.css";
TIP
根据业务可以自行在项目中覆盖对应变量,从而改变主题
变量列表
:root {
/**
* 颜色
**/
/* 主题色 */
--primary: #f01d24;
--primary-text: var(--primary);
--primary-press: var(--primary);
--primary-disable: rgba(240, 29, 36, 0.4);
--primary-selected: var(--primary);
--text-selected: var(--primary);
/* 辅助色 */
--warning: var(--primary);
--success: #1dbf6e;
--link: #2c7ff7;
--label-stroke: #f78e91; /* 标签描边 */
--background-notice: #fff2bd;
--background-warning: #fef2f2;
/* 中性色 */
--text-title: #1b1c33;
--text-body: #5e5e66;
--text-caption: #8d8e99; /* 辅助文字 */
--text-hint: #b0b1b8; /* 预输入文字 */
--text-anti: #fff; /* 反白文字 */
--stroke: #e3e3e6; /* 卡片描边 */
--line: #ededf0; /* 下划线 */
--background-page: #f7f8fa; /* 页面背景色 */
--background-block: #f2f3f5; /* 组件背景色 */
--mask: rgba(0, 0, 0, 1);
--mask1: rgba(0, 0, 0, 0.6);
--mask2: rgba(0, 0, 0, 0.1);
/* 其他 */
--font-highlight: #fff; /* 主色填充时文字颜色 */
--primary-highlight: var(--primary); /* 高亮主色背景下文字颜色 */
--primary-disable-select-color: #ffd2c2; /* 禁用时选中态文字色 */
/**
* 字体
**/
/* todo ITC Avant Garde Gothic Std字体包的导入 */
--font-family: "ITC Avant Garde Gothic Std", "PingFang SC", Helvetica,
"Droid Sans", Arial, sans-serif;
/* 字重 */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
/* 字号 */
--font-size-important: 24px;
--font-size-regular: 20px;
--font-size-module-title: 18px;
--font-size-title: 16px;
--font-size-content: 14px;
--font-size-desc: 13px;
--font-size-tabbar: 10px;
/**
* 圆角
**/
--border-radius-large: 12px;
--border-radius-medium: 8px;
--border-radius-small: 6px;
--border-radius-mini: 4px;
--border-radius-half: 100vh;
/**
* 阴影
**/
--box-shadow-important: 0 8px 24px rgba(0, 0, 0, 0.04); /* 重要阴影 */
--box-shadow-bottom: 0 -1px 8px rgba(0, 0, 0, 0.08); /* 底部阴影 */
--box-shadow-top: 0 1px 8px rgba(0, 0, 0, 0.08); /* 底部阴影 */
--box-shadow-common: 0 0 12px rgba(0, 0, 0, 0.06); /* 通用阴影 */
}