From 1caf5c1f240a59d7c84d12eb0dddf95f20a456fc Mon Sep 17 00:00:00 2001
From: Jokul <wangshengshan011@163.com>
Date: Sat, 4 Jul 2026 23:56:45 +0800
Subject: [PATCH] fix: dark theme Element Plus components

- Buttons: dark bg, hover/active states
- Dropdowns/Selects: dark bg, matching border
- Tabs, Tooltips, Dialogs, Drawers
- Added --bg-hover, --bg-tertiary variables
---
 src/styles/global.css    | 158 +++++++++++++++++++++++++++++++++++++++
 src/styles/variables.css |   4 +
 2 files changed, 162 insertions(+)

diff --git a/src/styles/global.css b/src/styles/global.css
index 702b100..b9a90f9 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -53,6 +53,92 @@ body {
   color: var(--text-secondary) !important;
 }
 
+/* Buttons */
+.el-button {
+  --el-button-bg-color: var(--bg-secondary) !important;
+  --el-button-border-color: var(--border-color) !important;
+  --el-button-text-color: var(--text-primary) !important;
+  --el-button-hover-bg-color: var(--bg-hover) !important;
+  --el-button-hover-border-color: var(--accent) !important;
+  --el-button-hover-text-color: var(--accent-light) !important;
+  --el-button-active-bg-color: var(--bg-hover) !important;
+  --el-button-disabled-bg-color: var(--bg-tertiary) !important;
+  --el-button-disabled-text-color: var(--text-muted) !important;
+}
+
+.el-button--primary {
+  --el-button-bg-color: var(--accent) !important;
+  --el-button-border-color: var(--accent) !important;
+  --el-button-text-color: #fff !important;
+  --el-button-hover-bg-color: var(--accent-light) !important;
+  --el-button-hover-border-color: var(--accent-light) !important;
+}
+
+.el-button--success {
+  --el-button-bg-color: #67c23a !important;
+  --el-button-border-color: #67c23a !important;
+  --el-button-text-color: #fff !important;
+}
+
+.el-button--danger {
+  --el-button-bg-color: #f56c6c !important;
+  --el-button-border-color: #f56c6c !important;
+  --el-button-text-color: #fff !important;
+}
+
+/* Select / Dropdown */
+.el-select-dropdown {
+  background: var(--bg-secondary) !important;
+  border-color: var(--border-color) !important;
+}
+
+.el-select-dropdown__item {
+  color: var(--text-primary) !important;
+}
+
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background: var(--bg-hover) !important;
+}
+
+.el-select-dropdown__item.selected {
+  color: var(--accent-light) !important;
+  font-weight: 600;
+}
+
+.el-popper.is-light {
+  background: var(--bg-secondary) !important;
+  border-color: var(--border-color) !important;
+}
+
+.el-popper.is-light .el-popper__arrow::before {
+  background: var(--bg-secondary) !important;
+  border-color: var(--border-color) !important;
+}
+
+.el-select__wrapper {
+  background: var(--bg-primary) !important;
+  border-color: var(--border-color) !important;
+  box-shadow: none !important;
+}
+
+.el-select__wrapper:hover {
+  border-color: var(--accent) !important;
+}
+
+.el-select__placeholder {
+  color: var(--text-secondary) !important;
+}
+
+.el-select__selected-item span {
+  color: var(--text-primary) !important;
+}
+
+.el-select__caret {
+  color: var(--text-muted) !important;
+}
+
+/* Table */
 .el-table {
   --el-table-bg-color: var(--bg-primary);
   --el-table-tr-bg-color: var(--bg-primary);
@@ -63,6 +149,7 @@ body {
   --el-table-border-color: var(--border-color);
 }
 
+/* Dialog */
 .el-dialog {
   --el-dialog-bg-color: var(--bg-secondary);
   --el-dialog-title-font-size: 16px;
@@ -72,10 +159,12 @@ body {
   color: var(--text-primary) !important;
 }
 
+/* Form */
 .el-form-item__label {
   color: var(--text-secondary) !important;
 }
 
+/* Drawer */
 .el-drawer {
   background: var(--bg-secondary) !important;
 }
@@ -90,3 +179,72 @@ body {
 .el-drawer__body {
   padding: 0;
 }
+
+/* Tabs */
+.el-tabs__item {
+  color: var(--text-secondary) !important;
+}
+
+.el-tabs__item.is-active {
+  color: var(--accent-light) !important;
+}
+
+.el-tabs__active-bar {
+  background-color: var(--accent) !important;
+}
+
+/* Tooltip */
+.el-tooltip__popper {
+  background: var(--bg-tertiary) !important;
+  color: var(--text-primary) !important;
+}
+
+/* Message */
+.el-message {
+  background: var(--bg-secondary) !important;
+  border-color: var(--border-color) !important;
+}
+
+.el-message__content {
+  color: var(--text-primary) !important;
+}
+
+/* Notification */
+.el-notification {
+  background: var(--bg-secondary) !important;
+  border-color: var(--border-color) !important;
+}
+
+/* Popover */
+.el-popover.el-popper {
+  background: var(--bg-secondary) !important;
+  border-color: var(--border-color) !important;
+}
+
+/* Radio / Checkbox */
+.el-radio__input.is-checked .el-radio__inner {
+  background-color: var(--accent) !important;
+  border-color: var(--accent) !important;
+}
+
+.el-checkbox__input.is-checked .el-checkbox__inner {
+  background-color: var(--accent) !important;
+  border-color: var(--accent) !important;
+}
+
+/* Tag */
+.el-tag {
+  border-color: var(--border-color) !important;
+}
+
+/* Divider */
+.el-divider {
+  border-color: var(--border-color) !important;
+}
+
+/* Card */
+.el-card {
+  background: var(--bg-card) !important;
+  border-color: var(--border-color) !important;
+  color: var(--text-primary) !important;
+}
diff --git a/src/styles/variables.css b/src/styles/variables.css
index 7cc0916..16c457a 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -2,6 +2,8 @@
 :root {
   --bg-primary: #0f0f1a;
   --bg-secondary: #1a1a2e;
+  --bg-tertiary: #252540;
+  --bg-hover: rgba(255, 255, 255, 0.08);
   --bg-card: rgba(255, 255, 255, 0.03);
   --bg-card-hover: rgba(255, 255, 255, 0.06);
   --bg-card-active: rgba(99, 102, 241, 0.08);
@@ -27,6 +29,8 @@
 :root.light {
   --bg-primary: #f8fafc;
   --bg-secondary: #f1f5f9;
+  --bg-tertiary: #e2e8f0;
+  --bg-hover: rgba(0, 0, 0, 0.04);
   --bg-card: #ffffff;
   --bg-card-hover: #f1f5f9;
   --bg-card-active: rgba(99, 102, 241, 0.06);