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 { 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-admin
--panel-bg-color: #1f1f1f;
--panel-border-color: #363b3f;
--panel-main-txt-color: #ebebeb;
--panel-text-color: rgb(174, 166, 153); --panel-text-color: rgb(174, 166, 153);
--panel-border: 1px solid #1d2023; --panel-border: 1px solid #1d2023;
--panel-border-color: #394c5e; --panel-border-color: #394c5e;
@@ -29,12 +17,28 @@ html.dark {
--panel-path-bg: #2f3030; --panel-path-bg: #2f3030;
--panel-button-disabled: #5a5a5a; --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.el-tag--info {
--el-tag-bg-color: rgb(49, 51, 51); --el-tag-bg-color: rgb(49, 51, 51);
--el-tag-border-color: rgb(64, 67, 67); --el-tag-border-color: rgb(64, 67, 67);
} }
.el-tag.el-tag--light { .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-border-color: var(--el-color-primary);
} }
.el-tag.el-tag--success { .el-tag.el-tag--success {
@@ -44,9 +48,9 @@ html.dark {
--el-tag-border-color: var(--el-color-danger); --el-tag-border-color: var(--el-color-danger);
} }
.el-card { .el-card {
--el-card-bg-color: #111417; --el-card-bg-color: var(--panel-bg-color);
color: #ffffff; color: var(--panel-main-txt-color);
border: 1px solid var(--el-card-border-color) !important; border: 1px solid var(--panel-border-color) !important;
} }
.el-table { .el-table {
@@ -84,7 +88,7 @@ html.dark {
--w-e-textarea-color: #eeeeee; --w-e-textarea-color: #eeeeee;
.md-editor-dark { .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; transition: background-color 1000s ease-out 0.5s;
} }
.el-input__wrapper { .el-input__wrapper {
background-color: #ffffff; background-color: var(--panel-main-txt-color);
box-shadow: 0 0 0 1px #dcdfe6 inset; box-shadow: 0 0 0 1px #dcdfe6 inset;
} }
.el-input__inner { .el-input__inner {
@@ -131,18 +135,18 @@ html.dark {
} }
&.is-active { &.is-active {
background: var(--el-color-primary); background: var(--el-color-primary);
color: #ffffff; color: var(--panel-main-txt-color);
&:hover { &:hover {
.el-icon { .el-icon {
color: #ffffff !important; color: var(--panel-main-txt-color) !important;
} }
span { span {
color: #ffffff !important; color: var(--panel-main-txt-color) !important;
} }
} }
&::before { &::before {
background: #ffffff; background: var(--panel-main-txt-color);
} }
} }
} }
@@ -171,7 +175,7 @@ html.dark {
.mobile-header { .mobile-header {
background-color: var(--panel-main-bg-color) !important; background-color: var(--panel-main-bg-color) !important;
border-bottom: var(--panel-border); border-bottom: var(--panel-border);
color: #ffffff; color: var(--panel-main-txt-color);
} }
} }
.system-label { .system-label {
@@ -183,7 +187,7 @@ html.dark {
background: none; background: none;
} }
.el-radio-button__original-radio:checked + .el-radio-button__inner { .el-radio-button__original-radio:checked + .el-radio-button__inner {
color: #ffffff; color: var(--panel-main-txt-color);
box-shadow: none !important; box-shadow: none !important;
} }
} }
@@ -240,7 +244,7 @@ html.dark {
transition: background-color 1000s ease-out 0.5s; transition: background-color 1000s ease-out 0.5s;
} }
.el-avatar { .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); box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
border: 0.5px solid #1f2022; border: 0.5px solid #1f2022;
} }