From 9f831e1689a2a774c2e46c10dd67d760a5e018de Mon Sep 17 00:00:00 2001 From: RuoYi Date: Sat, 18 Apr 2026 12:01:14 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9A=97=E9=BB=91=E6=A8=A1=E5=BC=8F=E4=B8=8B?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/sidebar.scss | 2 -- src/assets/styles/variables.module.scss | 19 +++++++++++++++++-- src/store/modules/settings.js | 4 ++++ src/utils/theme.js | 21 ++++++++++++++++++--- 4 files changed, 39 insertions(+), 7 deletions(-) diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index 9549d89..476fec6 100644 --- a/src/assets/styles/sidebar.scss +++ b/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; } diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss index ab980e2..899142f 100644 --- a/src/assets/styles/variables.module.scss +++ b/src/assets/styles/variables.module.scss @@ -111,6 +111,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 +205,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 +218,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(--el-color-primary) !important; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); + + &::before { + background: var(--el-color-primary) !important; + } + } } /* 分割窗格覆盖 */ diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js index 44f4611..016307f 100644 --- a/src/store/modules/settings.js +++ b/src/store/modules/settings.js @@ -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) @@ -46,6 +47,9 @@ const useSettingsStore = defineStore( toggleTheme() { this.isDark = !this.isDark toggleDark() + nextTick(() => { + handleThemeStyle(this.theme) + }) } } }) diff --git a/src/utils/theme.js b/src/utils/theme.js index d88b349..fcd4123 100644 --- a/src/utils/theme.js +++ b/src/utils/theme.js @@ -1,14 +1,29 @@ // 处理主题样式 export function handleThemeStyle(theme) { - 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, bg, t) { + 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) { + return mixHexColors(theme, '#2d3036', 0.34) +} + // hex颜色转rgb颜色 export function hexToRgb(str) { str = str.replace('#', '')