diff --git a/src/renderer/src/pages/home/Messages/ChatFlowHistory.tsx b/src/renderer/src/pages/home/Messages/ChatFlowHistory.tsx
index 8157ed1d..8a397642 100644
--- a/src/renderer/src/pages/home/Messages/ChatFlowHistory.tsx
+++ b/src/renderer/src/pages/home/Messages/ChatFlowHistory.tsx
@@ -3,6 +3,7 @@ import '@xyflow/react/dist/style.css'
 import { RobotOutlined, UserOutlined } from '@ant-design/icons'
 import ModelAvatar from '@renderer/components/Avatar/ModelAvatar'
 import { getModelLogo } from '@renderer/config/models'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { RootState } from '@renderer/store'
@@ -190,6 +191,7 @@ const ChatFlowHistory: FC<ChatFlowHistoryProps> = ({ conversationId }) => {
   const [edges, setEdges, onEdgesChange] = useEdgesState<any>([])
   const [loading, setLoading] = useState(true)
   const { userName } = useSettings()
+  const { theme } = useTheme()
 
   const topicId = conversationId
 
@@ -478,7 +480,8 @@ const ChatFlowHistory: FC<ChatFlowHistoryProps> = ({ conversationId }) => {
                 maxZoom: 1
               }}
               proOptions={{ hideAttribution: true }}
-              className="react-flow-container">
+              className="react-flow-container"
+              colorMode={theme === 'auto' ? 'system' : theme}>
               <Controls showInteractive={false} />
               <MiniMap
                 nodeStrokeWidth={3}