zishuo/1Panel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: 修改 dark 主题样式

Browse Source
This commit is contained in:
zhengkunwang223
2023-07-13 16:31:04 +08:00
parent 87327053dc
commit 201e0562b6
1 changed files with 33 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/styles/element-dark.scss
View File

@@ -1,21 +1,9 @@
html.dark {
--el-box-shadow-light: 0px 0px 4px rgba(0, 0, 0, 0.1) !important;
--el-border-color-lighter: #1d2023;
--el-fill-color-blank: #111417;
--el-bg-color: rgba(0, 11, 21, 1);
// --el-text-color-primary: #999999;
--el-text-color-regular: #bbbfc4 !important;
--el-fill-color-light: #111417;
--el-border-color: #303438;
--el-bg-color-overlay: rgba(0, 11, 21, 1);
--el-border-color-light: #1d2023;
// * menu
--el-menu-bg-color: #111417 !important;
--el-menu-item-bg-color: #111417;
--el-menu-text-color: #ffffff;
--el-menu-item-bg-color-active: rgb(44, 45, 46);
// * panel-admin
--panel-bg-color: #1f1f1f;
--panel-border-color: #363b3f;
--panel-main-txt-color: #ebebeb;
--panel-text-color: rgb(174, 166, 153);
--panel-border: 1px solid #1d2023;
--panel-border-color: #394c5e;
@@ -29,12 +17,28 @@ html.dark {
--panel-path-bg: #2f3030;
--panel-button-disabled: #5a5a5a;
--el-box-shadow-light: 0px 0px 4px rgba(0, 0, 0, 0.1) !important;
--el-border-color-lighter: #1d2023;
--el-fill-color-blank: var(--panel-bg-color);
--el-bg-color: rgba(0, 11, 21, 1);
// --el-text-color-primary: #999999;
--el-text-color-regular: #bbbfc4 !important;
--el-fill-color-light: var(--panel-bg-color);
--el-border-color: #303438;
--el-bg-color-overlay: rgba(0, 11, 21, 1);
--el-border-color-light: #1d2023;
// * menu
--el-menu-bg-color: var(--panel-bg-color) !important;
--el-menu-item-bg-color: var(--panel-bg-color);
--el-menu-text-color: var(--panel-main-txt-color);
--el-menu-item-bg-color-active: rgb(44, 45, 46);
.el-tag.el-tag--info {
--el-tag-bg-color: rgb(49, 51, 51);
--el-tag-border-color: rgb(64, 67, 67);
}
.el-tag.el-tag--light {
--el-tag-bg-color: #111417;
--el-tag-bg-color: var(--panel-bg-color);
--el-tag-border-color: var(--el-color-primary);
}
.el-tag.el-tag--success {
@@ -44,9 +48,9 @@ html.dark {
--el-tag-border-color: var(--el-color-danger);
}
.el-card {
--el-card-bg-color: #111417;
color: #ffffff;
border: 1px solid var(--el-card-border-color) !important;
--el-card-bg-color: var(--panel-bg-color);
color: var(--panel-main-txt-color);
border: 1px solid var(--panel-border-color) !important;
}
.el-table {
@@ -84,7 +88,7 @@ html.dark {
--w-e-textarea-color: #eeeeee;
.md-editor-dark {
--md-bk-color: #111417;
--md-bk-color: var(--panel-bg-color);
}
// * 以下为自定义暗黑模式内容
@@ -98,7 +102,7 @@ html.dark {
transition: background-color 1000s ease-out 0.5s;
}
.el-input__wrapper {
background-color: #ffffff;
background-color: var(--panel-main-txt-color);
box-shadow: 0 0 0 1px #dcdfe6 inset;
}
.el-input__inner {
@@ -131,18 +135,18 @@ html.dark {
}
&.is-active {
background: var(--el-color-primary);
color: #ffffff;
color: var(--panel-main-txt-color);
&:hover {
.el-icon {
color: #ffffff !important;
color: var(--panel-main-txt-color) !important;
}
span {
color: #ffffff !important;
color: var(--panel-main-txt-color) !important;
}
}
&::before {
background: #ffffff;
background: var(--panel-main-txt-color);
}
}
}
@@ -171,7 +175,7 @@ html.dark {
.mobile-header {
background-color: var(--panel-main-bg-color) !important;
border-bottom: var(--panel-border);
color: #ffffff;
color: var(--panel-main-txt-color);
}
}
.system-label {
@@ -183,7 +187,7 @@ html.dark {
background: none;
}
.el-radio-button__original-radio:checked + .el-radio-button__inner {
color: #ffffff;
color: var(--panel-main-txt-color);
box-shadow: none !important;
}
}
@@ -240,7 +244,7 @@ html.dark {
transition: background-color 1000s ease-out 0.5s;
}
.el-avatar {
--el-avatar-bg-color: #111417 !important;
--el-avatar-bg-color: var(--panel-bg-color) !important;
box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
border: 0.5px solid #1f2022;
}