perf: 样式调整

This commit is contained in:
chenjinsong
2021-11-15 19:19:09 +08:00
parent d6e9c79bf4
commit eeea7319e5
3 changed files with 6 additions and 23 deletions

View File

@@ -5,26 +5,7 @@
- 对项目中的主题相关颜色进行归类、抽取变量
- 代码中设置元素的颜色时,对主题相关色应使用变量,不应使用颜色值
- 切换主题时更改body标签上的class
- 主题色归类变更时,需维护此文件
### 主题色归类
#### 1.主色
软件的主色,包括按钮、高亮、强调等时候的颜色
`确定按钮(保存、确认、提交)`  `高亮字色`  `背景色`
#### 2.背景色
- 空白背景色,默认主题下是白色
- 基础背景色,`表头`  `小标题`  `标签`
#### 3.字色
- 标题字色,`表头`  `标题`  `强调`
- 普通字色,`小标题`  `正文` `普通`
- 次要字色,`提示`  `说明` `次要`
#### 4.边框色
- 普通边框色,`输入框`  `下拉框`  `复选框`
- 浅边框色
#### 5.提示色
`成功`  `警告`  `危险`  `普通`  `复选框`
### 源码改动
- theme-chalk/src/common/var.scss 首行增加$--theme属性
- theme-chalk/src/mixins/mixins.scss 改动较多,需要了解请比对文件差异

View File

@@ -25,6 +25,7 @@ html {
/* 默认主题和暗色主题 */
.theme-light {
$--theme: light;
@import './themes/theme-light.scss'; // 加载主题变量
@import './themes/src/index.scss'; // 加载ele样式
@import './components/index'; // 加载nezha组件样式
@@ -34,6 +35,7 @@ html {
}
.theme-dark {
$--theme: dark;
@import './themes/theme-dark.scss'; // 加载主题变量
@import './themes/src/index.scss'; // 加载ele样式
@import './components/index'; // 加载nezha组件样式

View File

@@ -1,4 +1,4 @@
$--theme: default !default;
$--theme: light !default;
/* Element Chalk Variables */
// Special comment for theme configurator