From 2d7069bdf95933ff8dc841321503b23ec7674f15 Mon Sep 17 00:00:00 2001 From: Jack Date: Mon, 19 Oct 2026 14:41:13 +0800 Subject: [PATCH] move the remaining light panels onto the dark tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The scroll-to-bottom control, the approval and queue float panels, and the inline code chips still carried the light-theme fills (#ffffff, rgba(255,255,255,.94/.68)) with .dark overrides pinned to old greys. Point all of them at --bg-card and its rgb triple so the alpha layers keep working, then drop the overrides that became identical to the base rule. Low-alpha white overlays are left alone — on a dark surface they read as a lift, which is the intent. --- .../hermes/chat/HistoryMessageList.vue | 6 +----- .../src/components/hermes/chat/MessageList.vue | 16 ++++------------ .../components/hermes/chat/SessionListItem.vue | 2 +- .../hermes/group-chat/GroupChatPanel.vue | 16 ++-------------- .../hermes/group-chat/GroupMessageList.vue | 6 +----- packages/client/src/styles/variables.scss | 2 ++ 6 files changed, 11 insertions(+), 37 deletions(-) diff --git a/packages/client/src/components/hermes/chat/HistoryMessageList.vue b/packages/client/src/components/hermes/chat/HistoryMessageList.vue index 196bf82..4099dc7 100644 --- a/packages/client/src/components/hermes/chat/HistoryMessageList.vue +++ b/packages/client/src/components/hermes/chat/HistoryMessageList.vue @@ -301,15 +301,11 @@ defineExpose({ justify-content: center; border-radius: 999px; border: 1px solid rgba(var(--accent-primary-rgb), 0.24); - background: rgba(255, 255, 255, 0.94); + background: rgba(var(--bg-card-rgb), 0.94); color: var(--accent-primary); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); padding: 0; cursor: pointer; - - .dark & { - background: rgba(38, 38, 38, 0.94); - } } .scroll-bottom-button:hover { diff --git a/packages/client/src/components/hermes/chat/MessageList.vue b/packages/client/src/components/hermes/chat/MessageList.vue index 3929b65..99705a1 100644 --- a/packages/client/src/components/hermes/chat/MessageList.vue +++ b/packages/client/src/components/hermes/chat/MessageList.vue @@ -893,15 +893,11 @@ defineExpose({ justify-content: center; border-radius: 999px; border: 1px solid rgba(var(--accent-primary-rgb), 0.24); - background: rgba(255, 255, 255, 0.94); + background: rgba(var(--bg-card-rgb), 0.94); color: var(--accent-primary); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); padding: 0; cursor: pointer; - - .dark & { - background: rgba(38, 38, 38, 0.94); - } } .scroll-bottom-button:hover { @@ -920,13 +916,9 @@ defineExpose({ padding: 10px; border: 1px solid rgba(var(--accent-info-rgb), 0.22); border-radius: 16px; - background: #ffffff; + background: var(--bg-card); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14); backdrop-filter: blur(14px); - - .dark & { - background: #262626; - } } .approval-float-panel { @@ -990,7 +982,7 @@ defineExpose({ font-size: 11px; line-height: 1.45; color: $text-primary; - background: rgba(255, 255, 255, 0.68); + background: rgba(var(--bg-card-rgb), 0.68); border: 1px solid $border-color; border-radius: 11px; padding: 8px 10px; @@ -1084,7 +1076,7 @@ defineExpose({ min-height: 34px; padding: 7px 8px; border-radius: 11px; - background: rgba(255, 255, 255, 0.68); + background: rgba(var(--bg-card-rgb), 0.68); color: $text-primary; .dark & { diff --git a/packages/client/src/components/hermes/chat/SessionListItem.vue b/packages/client/src/components/hermes/chat/SessionListItem.vue index e27df93..ada165b 100644 --- a/packages/client/src/components/hermes/chat/SessionListItem.vue +++ b/packages/client/src/components/hermes/chat/SessionListItem.vue @@ -403,7 +403,7 @@ onUnmounted(() => { padding: 2px; border-radius: inherit; object-fit: contain; - background: #fff; + background: var(--bg-card); } @keyframes rainbow-glow { diff --git a/packages/client/src/components/hermes/group-chat/GroupChatPanel.vue b/packages/client/src/components/hermes/group-chat/GroupChatPanel.vue index 34163dd..dd66ff2 100644 --- a/packages/client/src/components/hermes/group-chat/GroupChatPanel.vue +++ b/packages/client/src/components/hermes/group-chat/GroupChatPanel.vue @@ -932,10 +932,6 @@ export default defineComponent({ components: { CreateRoomForm } }) color: $text-secondary; background-color: $bg-card-hover; border-radius: $radius-sm; - - .dark & { - background-color: rgba(255, 255, 255, 0.06); - } } .context-stop-btn { @@ -968,13 +964,9 @@ export default defineComponent({ components: { CreateRoomForm } }) padding: 10px; border: 1px solid rgba(var(--accent-primary-rgb), 0.24); border-radius: 16px; - background: #ffffff; + background: var(--bg-card); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14); backdrop-filter: blur(14px); - - .dark & { - background: #262626; - } } .approval-float-header { @@ -1029,14 +1021,10 @@ export default defineComponent({ components: { CreateRoomForm } }) font-size: 11px; line-height: 1.45; color: $text-primary; - background: rgba(255, 255, 255, 0.68); + background: rgba(var(--bg-card-rgb), 0.68); border: 1px solid $border-color; border-radius: 11px; padding: 8px 10px; - - .dark & { - background: rgba(255, 255, 255, 0.08); - } } .approval-float-actions { diff --git a/packages/client/src/components/hermes/group-chat/GroupMessageList.vue b/packages/client/src/components/hermes/group-chat/GroupMessageList.vue index 9165ae9..5976fba 100644 --- a/packages/client/src/components/hermes/group-chat/GroupMessageList.vue +++ b/packages/client/src/components/hermes/group-chat/GroupMessageList.vue @@ -185,15 +185,11 @@ defineExpose({ scrollToBottom }) justify-content: center; border-radius: 999px; border: 1px solid rgba(var(--accent-primary-rgb), 0.24); - background: rgba(255, 255, 255, 0.94); + background: rgba(var(--bg-card-rgb), 0.94); color: var(--accent-primary); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); padding: 0; cursor: pointer; - - .dark & { - background: rgba(38, 38, 38, 0.94); - } } .scroll-bottom-button:hover { diff --git a/packages/client/src/styles/variables.scss b/packages/client/src/styles/variables.scss index e8a9899..66df91a 100644 --- a/packages/client/src/styles/variables.scss +++ b/packages/client/src/styles/variables.scss @@ -13,6 +13,8 @@ --bg-card: oklch(0.185 0.014 248); // 容器 / 输入区（比页面更亮，向上浮） --bg-card-hover: oklch(0.225 0.016 246); --bg-input: oklch(0.105 0.012 252); // 输入框，比卡片更沉，形成凹陷感 + // 半透明浮层需要 rgb 三元组才能拼 alpha，OKLCH 无法直接拆。 + --bg-card-rgb: 40, 44, 56; // Borders — 发丝线分两档 --border-color: oklch(0.305 0.018 242);