暗黑模式下主题样式优化

src/assets/styles/sidebar.scss

@@ -125,7 +125,6 @@
           position: absolute;
           inset: 0;
           background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
-          border-right: 3px solid var(--current-color, #409eff);
           pointer-events: none;
           z-index: 1;
         }
@@ -175,7 +174,6 @@
           position: absolute;
           inset: 0;
           background-color: var(--current-color-light, #ecf5ff);
-          border-right: 3px solid var(--current-color, #409eff);
           pointer-events: none;
           z-index: 1;
         }

src/assets/styles/variables.module.scss

@@ -89,6 +89,8 @@ html.dark {
   --el-text-color-regular: #d0d0d0;
   --el-border-color: #434343;
   --el-border-color-light: #434343;
+  --el-menu-text-color: #d0d0d0;
+  --sidebar-logo-text: #d0d0d0;
   
   /* primary */
   --primary-bg: #18212b;
@@ -111,6 +113,10 @@ html.dark {
   --tags-item-text: #d0d0d0;
   --tags-item-hover: #2d2d2d;
   --tags-close-hover: #64666a;
+  /* 卡片模式激活页签 */
+  --tags-card-active-bg: var(--el-bg-color-overlay);
+  --tags-card-active-bg: color-mix(in srgb, var(--el-color-primary) 22%, var(--el-bg-color-overlay) 78%);
+  --tags-card-active-border: var(--tags-card-active-bg);
 
   /* splitpanes 组件暗黑模式变量 */
   --splitpanes-bg: #141414;
@@ -201,7 +207,8 @@ html.dark {
     &.tags-view-container--chrome {
       --chrome-strip-bg: var(--el-bg-color);
       --chrome-strip-border: var(--el-border-color);
-      --chrome-tab-active-bg: var(--el-color-primary-light-9);
+      --chrome-tab-active-bg: var(--el-bg-color-overlay);
+      --chrome-tab-active-bg: color-mix(in srgb, var(--el-color-primary) 22%, var(--el-bg-color-overlay) 78%);
       --chrome-tab-text: var(--el-text-color-secondary);
       --chrome-tab-text-active: var(--el-color-primary);
       .tags-view-wrapper .tags-view-item:not(.active) + .tags-view-item:not(.active) {
@@ -213,10 +220,20 @@ html.dark {
           color: var(--el-text-color-primary);
         }
         &.active {
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
+          box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
         }
       }
     }
+    &:not(.tags-view-container--chrome) .tags-view-wrapper .tags-view-item.active {
+      background-color: var(--tags-card-active-bg) !important;
+      border-color: var(--tags-card-active-border) !important;
+      color: var(--current-color, #409eff) !important;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+
+      &::before {
+        background: var(--current-color, #409eff) !important;
+      }
+    }
   }
 
   /* 分割窗格覆盖 */

src/layout/components/Sidebar/Logo.vue

@@ -43,7 +43,7 @@ const getLogoBackground = computed(() => {
 // 获取Logo文字颜色
 const getLogoTextColor = computed(() => {
   if (settingsStore.isDark) {
-    return 'var(--sidebar-text)'
+    return 'var(--sidebar-logo-text)'
   }
   if (settingsStore.navType == 3) {
     return variables.menuLightText

src/store/modules/settings.ts

@@ -1,6 +1,7 @@
 import defaultSettings from '@/settings'
 import { useDark, useToggle } from '@vueuse/core'
 import { useDynamicTitle } from '@/utils/dynamicTitle'
+import { handleThemeStyle } from '@/utils/theme'
 
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
@@ -64,6 +65,9 @@ const useSettingsStore = defineStore(
       toggleTheme() {
         this.isDark = !this.isDark
         toggleDark()
+        nextTick(() => {
+          handleThemeStyle(this.theme)
+        })
       }
     }
   })

src/utils/theme.ts

@@ -1,14 +1,29 @@
 // 处理主题样式
 export function handleThemeStyle(theme: string): void {
-  document.documentElement.style.setProperty('--el-color-primary', theme)
+  const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
+  const primary = isDark ? softenPrimaryForDark(theme) : theme
+  document.documentElement.style.setProperty('--el-color-primary', primary)
   for (let i = 1; i <= 9; i++) {
-    document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(theme, i / 10)}`)
+    document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(primary, i / 10)}`)
   }
   for (let i = 1; i <= 9; i++) {
-    document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, `${getDarkColor(theme, i / 10)}`)
+    document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, `${getDarkColor(primary, i / 10)}`)
   }
 }
 
+/** 混合两种十六进制颜色 */
+export function mixHexColors(fg: string, bg: string, t: number): string {
+  const a = hexToRgb(String(fg).replace('#', ''))
+  const b = hexToRgb(String(bg).replace('#', ''))
+  const out = [0, 1, 2].map((i) => Math.round(a[i] * (1 - t) + b[i] * t))
+  return rgbToHex(out[0], out[1], out[2])
+}
+
+/** 暗色模式下柔化主题色 */
+export function softenPrimaryForDark(theme: string): string {
+  return mixHexColors(theme, '#2d3036', 0.34)
+}
+
 // hex颜色转rgb颜色
 export function hexToRgb(str: string): number[] {
   str = str.replace('#', '')