From cb381bda5e00380162a40999ab6d4a431085e074 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Tue, 18 Feb 2025 09:39:02 +0800
Subject: [PATCH] feat: Improve system prompt styling with theme-aware
 background

---
 src/renderer/src/pages/home/Messages/Prompt.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/pages/home/Messages/Prompt.tsx b/src/renderer/src/pages/home/Messages/Prompt.tsx
index 5d0c2c6f02..e077fff6fa 100644
--- a/src/renderer/src/pages/home/Messages/Prompt.tsx
+++ b/src/renderer/src/pages/home/Messages/Prompt.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@renderer/context/ThemeProvider'
 import AssistantSettingsPopup from '@renderer/pages/settings/AssistantSettings'
 import { Assistant, Topic } from '@renderer/types'
 import { FC } from 'react'
@@ -11,26 +12,30 @@ interface Props {
 
 const Prompt: FC<Props> = ({ assistant, topic }) => {
   const { t } = useTranslation()
+  const { theme } = useTheme()
 
   const prompt = assistant.prompt || t('chat.default.description')
   const topicPrompt = topic?.prompt || ''
+  const isDark = theme === 'dark'
+
   if (!prompt && !topicPrompt) {
     return null
   }
+
   return (
-    <Container className="system-prompt" onClick={() => AssistantSettingsPopup.show({ assistant })}>
+    <Container className="system-prompt" onClick={() => AssistantSettingsPopup.show({ assistant })} $isDark={isDark}>
       <Text>{prompt}</Text>
     </Container>
   )
 }
 
-const Container = styled.div`
+const Container = styled.div<{ $isDark: boolean }>`
   padding: 10px 20px;
-  background-color: var(--color-background-soft);
   margin: 4px 20px 0 20px;
   border-radius: 6px;
   cursor: pointer;
   border: 0.5px solid var(--color-border);
+  background-color: ${({ $isDark }) => ($isDark ? 'var(--color-background-soft)' : 'transparent')};
 `
 
 const Text = styled.div`