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