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

LiuHao

2024-12-27 2b1f5f2c7033eebee97de472b5f6195d95516b80

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

 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 @@
  .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;

 src/layout/components/TagsView/index.vue

@@ -70,8 +70,8 @@
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) => {