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

update 优化 黑暗模式下筛选框两个按钮的样式

Browse Source
This commit is contained in:
疯狂的狮子Li
2026-05-28 16:45:23 +08:00
parent 779b42c653
commit fcd1d6ae75
2 changed files with 36 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/components/_query-form.scss
+12
View File
@@ -84,6 +84,18 @@
border-radius: 10px !important;
}
html.dark .query-form .el-button--primary {
--el-button-bg-color: rgba(37, 99, 235, 0.28);
--el-button-border-color: rgba(96, 165, 250, 0.62);
--el-button-text-color: #dbeafe;
--el-button-hover-bg-color: rgba(59, 130, 246, 0.36);
--el-button-hover-border-color: rgba(147, 197, 253, 0.78);
--el-button-hover-text-color: #eff6ff;
--el-button-active-bg-color: rgba(29, 78, 216, 0.44);
--el-button-active-border-color: rgba(96, 165, 250, 0.86);
--el-button-active-text-color: #eff6ff;
}
@media (max-width: 900px) {
.query-form {
gap: 10px 12px;
src/assets/styles/tokens/_theme-dark.scss
+24
View File
@@ -26,6 +26,20 @@ html.dark {
--el-color-primary-light-9: rgba(53, 109, 255, 0.14);
}
.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-text):not(
.is-link
) {
--el-button-bg-color: rgba(15, 23, 42, 0.44);
--el-button-border-color: rgba(96, 165, 250, 0.38);
--el-button-text-color: #dbeafe;
--el-button-hover-bg-color: rgba(96, 165, 250, 0.16);
--el-button-hover-border-color: rgba(96, 165, 250, 0.58);
--el-button-hover-text-color: #bfdbfe;
--el-button-active-bg-color: rgba(59, 130, 246, 0.22);
--el-button-active-border-color: rgba(96, 165, 250, 0.72);
--el-button-active-text-color: #dbeafe;
}
// --- 各类型按钮（含 plain）在暗色下的 EP CSS 变量 ---
.el-button--primary {
--el-button-bg-color: #2b6bd3;
@@ -41,8 +55,10 @@ html.dark {
--el-button-bg-color: rgba(43, 107, 211, 0.12);
--el-button-border-color: rgba(58, 123, 232, 0.5);
--el-button-text-color: #dbe8ff;
--el-button-hover-text-color: #dbe8ff;
--el-button-hover-bg-color: rgba(58, 123, 232, 0.2);
--el-button-hover-border-color: rgba(58, 123, 232, 0.7);
--el-button-active-text-color: #dbe8ff;
--el-button-active-bg-color: rgba(43, 107, 211, 0.28);
--el-button-active-border-color: rgba(43, 107, 211, 0.8);
}
@@ -61,8 +77,10 @@ html.dark {
--el-button-bg-color: rgba(31, 138, 90, 0.12);
--el-button-border-color: rgba(41, 164, 109, 0.5);
--el-button-text-color: #dbf6e8;
--el-button-hover-text-color: #dbf6e8;
--el-button-hover-bg-color: rgba(41, 164, 109, 0.2);
--el-button-hover-border-color: rgba(41, 164, 109, 0.7);
--el-button-active-text-color: #dbf6e8;
--el-button-active-bg-color: rgba(31, 138, 90, 0.28);
--el-button-active-border-color: rgba(31, 138, 90, 0.8);
}
@@ -81,8 +99,10 @@ html.dark {
--el-button-bg-color: rgba(184, 121, 34, 0.12);
--el-button-border-color: rgba(214, 149, 59, 0.5);
--el-button-text-color: #ffecc8;
--el-button-hover-text-color: #ffecc8;
--el-button-hover-bg-color: rgba(214, 149, 59, 0.2);
--el-button-hover-border-color: rgba(214, 149, 59, 0.7);
--el-button-active-text-color: #ffecc8;
--el-button-active-bg-color: rgba(184, 121, 34, 0.28);
--el-button-active-border-color: rgba(184, 121, 34, 0.8);
}
@@ -101,8 +121,10 @@ html.dark {
--el-button-bg-color: rgba(178, 74, 74, 0.12);
--el-button-border-color: rgba(209, 96, 96, 0.5);
--el-button-text-color: #ffd6d6;
--el-button-hover-text-color: #ffd6d6;
--el-button-hover-bg-color: rgba(209, 96, 96, 0.2);
--el-button-hover-border-color: rgba(209, 96, 96, 0.7);
--el-button-active-text-color: #ffd6d6;
--el-button-active-bg-color: rgba(178, 74, 74, 0.28);
--el-button-active-border-color: rgba(178, 74, 74, 0.8);
}
@@ -121,8 +143,10 @@ html.dark {
--el-button-bg-color: rgba(75, 85, 99, 0.16);
--el-button-border-color: rgba(102, 112, 133, 0.55);
--el-button-text-color: #e5e7eb;
--el-button-hover-text-color: #e5e7eb;
--el-button-hover-bg-color: rgba(102, 112, 133, 0.22);
--el-button-hover-border-color: rgba(102, 112, 133, 0.75);
--el-button-active-text-color: #e5e7eb;
--el-button-active-bg-color: rgba(75, 85, 99, 0.3);
--el-button-active-border-color: rgba(75, 85, 99, 0.85);
}