Browse Source

优化 主题色在深色模式下显示亮度

LiuHao 4 months ago
parent
commit
2b1f5f2c70
2 changed files with 21 additions and 2 deletions
  1. 19 0
      src/assets/styles/variables.module.scss
  2. 2 2
      src/layout/components/TagsView/index.vue

+ 19 - 0
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;

+ 2 - 2
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) => {