zhouyanli/wer-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 重构暗黑模式样式 将所有写死的颜色统一整理

Browse Source
This commit is contained in:
疯狂的狮子Li
2026-04-01 19:18:07 +08:00
parent 3f30bac6f3
commit 38c67fba25
31 changed files with 163 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/assets/styles/components/_card-shell.scss
View File

@@ -4,8 +4,8 @@
// --- 历史「表单分区标题」样式 ---
.form-header {
font-size: 15px;
color: #6379bb;
border-bottom: 1px solid #ddd;
color: var(--el-color-primary);
border-bottom: 1px solid var(--app-surface-border);
margin: 8px 10px 25px 10px;
padding-bottom: 5px;
}
@@ -13,8 +13,8 @@
// --- 树形容器描边（暗色覆盖在 _search-panel） ---
.tree-border {
margin-top: 8px;
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(255, 255, 255, 0.42) none;
border: 1px solid var(--app-surface-border);
background: var(--app-surface-bg);
border-radius: 22px;
width: 100%;
padding: 12px;
@@ -39,7 +39,7 @@
padding: 14px 16px 10px !important;
min-height: auto;
background: transparent;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
border-bottom: 1px solid var(--app-surface-border);
}
.el-card__body {
@@ -59,7 +59,7 @@
.el-card:hover {
box-shadow: var(--app-shadow-md);
border-color: rgba(64, 158, 255, 0.16);
border-color: var(--app-accent-soft);
}
.card-box {

4
src/assets/styles/components/_misc.scss
View File

@@ -1,9 +1,9 @@
.link-type,
.link-type:focus {
color: #337ab7;
color: var(--el-color-primary);
cursor: pointer;
&:hover {
color: rgb(32, 160, 255);
color: var(--app-accent-strong);
}
}

3
src/assets/styles/components/_page-shell.scss
View File

@@ -144,7 +144,8 @@
.dept-tree::-webkit-scrollbar-thumb,
.selector-tree::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(148, 163, 184, 0.55);
background: var(--app-text-muted);
opacity: 0.55;
}
.dept-tree::-webkit-scrollbar-track,

6
src/assets/styles/components/_search-panel.scss
View File

@@ -7,7 +7,7 @@
min-width: 28px !important;
padding: 0 !important;
border-radius: 10px !important;
background: rgba(53, 109, 255, 0.08) !important;
background: var(--app-accent-soft) !important;
}
.data-table .el-button.is-link + .el-button.is-link {
@@ -77,7 +77,7 @@
:global(html.dark) {
.tree-border {
background: rgba(15, 23, 42, 0.42);
border-color: rgba(100, 116, 139, 0.22);
background: var(--app-surface-bg);
border-color: var(--app-surface-border);
}
}

4
src/assets/styles/mixin.scss
View File

@@ -10,7 +10,7 @@
// WebKit 滚动条配色（用于可滚动容器）
@mixin scrollBar {
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
background: var(--app-surface-border);
}
&::-webkit-scrollbar {
@@ -18,7 +18,7 @@
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
background: var(--app-text-muted);
border-radius: 20px;
}
}

10
src/assets/styles/tokens/_theme-dark.scss
View File

@@ -15,9 +15,15 @@ html.dark {
--tableHeaderBg: var(--el-bg-color);
--tableHeaderTextColor: var(--el-text-color);
// --- 树节点：暗色下修正 primary 浅底色 ---
// --- 表格：暗色下选中行背景 ---
--el-table-current-row-bg-color: rgba(53, 109, 255, 0.14);
--el-table-row-hover-bg-color: rgba(148, 163, 184, 0.07);
// --- 全局：暗色下修正 primary 浅底色（表格行选中、树节点等） ---
--el-color-primary-light-9: rgba(53, 109, 255, 0.14);
.el-tree-node__content {
--el-color-primary-light-9: #262727;
--el-color-primary-light-9: rgba(53, 109, 255, 0.14);
}
// --- 各类型按钮（含 plain）在暗色下的 EP CSS 变量 ---

4
src/assets/styles/vendors/element-plus/_dialog.scss vendored
View File

@@ -26,7 +26,7 @@
.el-dialog__header {
padding: 18px 20px 14px;
box-sizing: border-box;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
border-bottom: 1px solid var(--app-surface-border);
margin-right: 0;
background: var(--app-elevated-soft-bg);
}
@@ -76,7 +76,7 @@
justify-content: flex-end;
gap: 8px;
padding: 14px 20px 20px;
border-top: 1px solid rgba(148, 163, 184, 0.14);
border-top: 1px solid var(--app-surface-border);
}
}
}

2
src/assets/styles/vendors/element-plus/_dropdown.scss vendored
View File

@@ -37,7 +37,7 @@
right: 2px;
top: -6px;
width: auto;
background: rgba(148, 163, 184, 0.14);
background: var(--app-surface-border);
}
}

2
src/assets/styles/vendors/element-plus/_feedback.scss vendored
View File

@@ -82,7 +82,7 @@
justify-content: flex-end;
gap: 8px;
padding: 16px 20px 20px;
border-top: 1px solid rgba(148, 163, 184, 0.14);
border-top: 1px solid var(--app-surface-border);
}
.el-message-box__btns .el-button {

2
src/assets/styles/vendors/element-plus/_navigation.scss vendored
View File

@@ -40,7 +40,7 @@
.el-pagination .el-pagination__sizes .el-input__wrapper {
min-width: 32px;
height: 32px;
border: 1px solid rgba(148, 163, 184, 0.14);
border: 1px solid var(--app-surface-border);
background: var(--app-surface-bg);
}

36
src/assets/styles/vendors/element-plus/_overrides.scss vendored
View File

@@ -40,8 +40,40 @@
.el-table {
--el-table-border-color: var(--app-surface-border);
--el-table-header-bg-color: var(--tableHeaderBg);
--el-table-tr-bg-color: transparent;
background: transparent;
--el-table-tr-bg-color: var(--el-bg-color);
--el-table-bg-color: var(--el-bg-color);
--el-table-row-hover-bg-color: var(--el-fill-color-light);
--el-table-current-row-bg-color: var(--el-color-primary-light-9);
background: var(--el-bg-color);
}
// 暗色模式：行背景、hover、选中全部用不透明色，防止固定列透视
html.dark .el-table {
--el-table-tr-bg-color: var(--app-surface-bg);
--el-table-bg-color: var(--app-surface-bg);
--el-table-row-hover-bg-color: #2a3a55;
--el-table-current-row-bg-color: #1e3a6e;
--el-color-primary-light-9: #1e3a6e;
background: var(--app-surface-bg);
}
// 固定列单元格基底背景与普通行保持一致（亮/暗均适用）
.el-table .el-table__cell {
background-color: var(--el-table-tr-bg-color);
}
// hover 行的所有单元格（含固定列）覆写为不透明背景
.el-table__body tr.hover-row > td.el-table__cell,
.el-table__body tr.hover-row.current-row > td.el-table__cell,
.el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,
.el-table__body tr.hover-row.el-table__row--striped.current-row > td.el-table__cell,
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
background-color: var(--el-table-row-hover-bg-color) !important;
}
// 选中行的所有单元格（含固定列）覆写为不透明背景
.el-table__body tr.current-row > td.el-table__cell {
background-color: var(--el-table-current-row-bg-color) !important;
}
// --- 输入类默认内描边（与 _form 中 focus 环配合） ---

7
src/assets/styles/vendors/element-plus/_popper.scss vendored
View File

@@ -98,7 +98,7 @@
.el-cascader-menu {
min-width: 180px;
border-right-color: rgba(148, 163, 184, 0.12);
border-right-color: var(--app-surface-border);
}
.el-cascader-node__prefix,
@@ -184,11 +184,12 @@
.el-time-panel__content::before,
.el-time-panel__content::after {
border-color: rgba(148, 163, 184, 0.14);
border-color: var(--app-surface-border);
}
.el-scrollbar__thumb {
background: rgba(148, 163, 184, 0.42);
background: var(--app-text-muted);
opacity: 0.42;
}
.el-scrollbar__thumb:hover {

11
src/assets/styles/vendors/element-plus/_shell.scss vendored
View File

@@ -9,7 +9,7 @@
.el-drawer__header {
margin-bottom: 0;
padding: 18px 20px 16px;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
border-bottom: 1px solid var(--app-surface-border);
background: var(--app-elevated-soft-bg);
color: var(--app-text-title);
}
@@ -43,7 +43,7 @@
}
.el-loading-mask {
background: rgba(248, 250, 252, 0.76);
background: color-mix(in srgb, var(--app-surface-bg) 82%, transparent);
backdrop-filter: blur(4px);
}
@@ -52,7 +52,7 @@
}
.el-descriptions {
--el-descriptions-table-border: rgba(148, 163, 184, 0.14);
--el-descriptions-table-border: var(--app-surface-border);
}
.el-descriptions__body .el-descriptions__table {
@@ -103,8 +103,3 @@
box-shadow: var(--app-shadow-md);
}
html.dark {
.el-loading-mask {
background: rgba(6, 11, 22, 0.7);
}
}

9
src/assets/styles/vendors/element-plus/_table.scss vendored
View File

@@ -32,6 +32,13 @@
background-color: var(--el-bg-color);
}
html.dark {
.el-table__fixed-body-wrapper,
.el-table__fixed-right-body-wrapper {
background-color: var(--app-surface-bg);
}
}
// 去掉额外的表格边线，使用表格border
.el-table--border:after,
.el-table--border:before,
@@ -56,7 +63,7 @@
.el-table .el-dropdown-link {
cursor: pointer;
color: #409eff;
color: var(--el-color-primary);
margin-left: 10px;
}