tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 系统设置添加主题动态切换

Browse Source
This commit is contained in:
郝先瑞
2022-03-01 23:45:07 +08:00
parent 108aeeb43a
commit a6882db1dd
9 changed files with 170 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/styles/element-plus.scss
View File

@@ -1,5 +1,35 @@
:root {
--el-color-primary: #409EFF;
// 这里可以设置你自定义的颜色变量
// 这个是element主要按钮:active的颜色，当主题更改后此变量的值也随之更改
--el-color-primary-dark: #0d84ff;
}
/* 核心组件的变量，下面这些样式是必须要写的 */
.el-link.el-link--primary:hover {
color: var(--el-color-primary-light-2) !important;
}
.el-tag {
--el-tag-bg-color: var(--el-color-primary-light-9);
--el-tag-border-color: var(--el-color-primary-light-8);
--el-tag-text-color: var(--el-color-primary);
--el-tag-hover-color: var(--el-color-primary);
}
.el-button--default:active {
color: var(--el-color-primary-dark) !important;
border-color: var(--el-color-primary-dark) !important;
}
.el-button--primary {
--el-button-text-color: var(--el-color-white) !important;
--el-button-bg-color: var(--el-color-primary) !important;
--el-button-border-color: var(--el-color-primary) !important;
--el-button-hover-bg-color: var(--el-color-primary-light-2) !important;
--el-button-hover-border-color: var(--el-color-primary-light-2) !important;
--el-button-active-bg-color: var(--el-color-primary-dark) !important;
--el-button-active-border-color: var(--el-color-primary-dark) !important;
}
// 覆盖 element-plus 的样式

2
src/styles/element-variables.module.scss
View File

@@ -1,5 +1,5 @@
/**
* I think element-ui's default theme color is too light for long-term use.
* I think element default theme color is too light for long-term use.
* So I modified the default color and you can modify it to your liking.
* https://vitejs.cn/guide/features.html#postcss
**/