From a708901e7feda4c5c274ddbdd055aa7bf02dca28 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Tue, 2 Dec 2025 17:03:59 +0800
Subject: [PATCH] fix: fix dark mode white background in conversation preview
 dialog (#3881)

* Initial plan

* Fix dark mode background issue in conversation data preview

Co-authored-by: Soulter <37870767+Soulter@users.noreply.github.com>

* style: update conversation messages container background color and add debug log for dark mode detection

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Soulter <37870767+Soulter@users.noreply.github.com>
Co-authored-by: Soulter <905617992@qq.com>
---
 dashboard/src/views/ConversationPage.vue | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/dashboard/src/views/ConversationPage.vue b/dashboard/src/views/ConversationPage.vue
index a1b853f3f..d6ec28100 100644
--- a/dashboard/src/views/ConversationPage.vue
+++ b/dashboard/src/views/ConversationPage.vue
@@ -187,7 +187,7 @@
                     </div>
 
                     <!-- 预览模式 - 聊天界面 -->
-                    <div v-else class="conversation-messages-container">
+                    <div v-else class="conversation-messages-container" style="background-color: var(--v-theme-surface);">
                         <!-- 空对话提示 -->
                         <div v-if="conversationHistory.length === 0" class="text-center py-5">
                             <v-icon size="48" color="grey">mdi-chat-remove</v-icon>
@@ -195,7 +195,7 @@
                         </div>
 
                         <!-- 消息列表组件 -->
-                        <MessageList v-else :messages="formattedMessages" :isDark="false" />
+                        <MessageList v-else :messages="formattedMessages" :isDark="isDark" />
                     </div>
                 </v-card-text>
 
@@ -320,6 +320,7 @@ import { debounce } from 'lodash';
 import { VueMonacoEditor } from '@guolao/vue-monaco-editor';
 import MarkdownIt from 'markdown-it';
 import { useCommonStore } from '@/stores/common';
+import { useCustomizerStore } from '@/stores/customizer';
 import { useI18n, useModuleI18n } from '@/i18n/composables';
 import MessageList from '@/components/chat/MessageList.vue';
 
@@ -341,11 +342,13 @@ export default {
     setup() {
         const { t, locale } = useI18n();
         const { tm } = useModuleI18n('features/conversation');
+        const customizerStore = useCustomizerStore();
 
         return {
             t,
             tm,
-            locale
+            locale,
+            customizerStore
         };
     },
 
@@ -485,6 +488,12 @@ export default {
             };
         },
 
+        // 检测是否为暗色模式
+        isDark() {
+            console.log('isDark', this.customizerStore.uiTheme);
+            return this.customizerStore.uiTheme === 'PurpleThemeDark';
+        },
+
         // 将对话历史转换为 MessageList 组件期望的格式
         formattedMessages() {
             return this.conversationHistory.map(msg => {
@@ -987,6 +996,11 @@ export default {
     background-color: #f9f9f9;
 }
 
+/* 暗色模式下的聊天消息容器 */
+.v-theme--dark .conversation-messages-container {
+    background-color: #1e1e1e;
+}
+
 /* 对话详情卡片 */
 .conversation-detail-card {
     max-height: 90vh;