From 2b1f5f2c7033eebee97de472b5f6195d95516b80 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: Fri, 27 Dec 2024 11:45:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E8=89=B2=E5=9C=A8=E6=B7=B1=E8=89=B2=E6=A8=A1=E5=BC=8F=E4=B8=8B?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E4=BA=AE=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/variables.module.scss  | 19 +++++++++++++++++++
 src/layout/components/TagsView/index.vue |  4 ++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 36a8df6..4405b97 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -21,7 +21,12 @@
 
   // ele
   --brder-color: #e8e8e8;
+
+  // 添加 tag 相关变量
+  --tags-view-active-bg: var(--el-color-primary);
+  --tags-view-active-border-color: var(--el-color-primary);
 }
+
 html.dark {
   --menuBg: #1d1e1f;
   --menuColor: #bfcbd9;
@@ -41,6 +46,20 @@ html.dark {
   .el-tree-node__content {
     --el-color-primary-light-9: #262727;
   }
+
+  .el-button--primary {
+    --el-button-bg-color: var(--el-color-primary-dark-6);
+    --el-button-border-color: var(--el-color-primary-light-2);
+  }
+
+  .el-switch {
+    --el-switch-on-color: var(--el-color-primary-dark-6);
+    --el-switch-border-color: var(--el-color-primary-light-2);
+  }
+
+  // 在深色模式下使用更深的颜色
+  --tags-view-active-bg: var(--el-color-primary-dark-6);
+  --tags-view-active-border-color: var(--el-color-primary-light-2);
   // vxe-table 主题
   --vxe-font-color: #98989e;
   --vxe-primary-color: #2c7ecf;
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 0812feb..9bcf285 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -70,8 +70,8 @@ const isActive = (r: RouteLocationNormalized): boolean => {
 const activeStyle = (tag: RouteLocationNormalized) => {
   if (!isActive(tag)) return {};
   return {
-    'background-color': theme.value,
-    'border-color': theme.value
+    'background-color': 'var(--tags-view-active-bg)',
+    'border-color': 'var(--tags-view-active-border-color)'
   };
 };
 const isAffix = (tag: RouteLocationNormalized) => {