diff --git a/frontend/src/components/MermaidRenderer.tsx b/frontend/src/components/MermaidRenderer.tsx
index ef3e9222..ac37cfb4 100644
--- a/frontend/src/components/MermaidRenderer.tsx
+++ b/frontend/src/components/MermaidRenderer.tsx
@@ -6,11 +6,12 @@ import { oneLight, vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/
 import { MermaidRendererProps } from './types';
 import { useSelector } from 'react-redux';
 import { selectStatus } from '../conversation/conversationSlice';
+import { useDarkTheme } from '../hooks';
 
 const MermaidRenderer: React.FC<MermaidRendererProps> = ({
   code,
-  isDarkTheme,
 }) => {
+  const [isDarkTheme] = useDarkTheme();
   const diagramId = useRef(`mermaid-${crypto.randomUUID()}`);
   const status = useSelector(selectStatus);
   const [error, setError] = useState<string | null>(null);
diff --git a/frontend/src/components/types/index.ts b/frontend/src/components/types/index.ts
index 7f8834bb..25dae251 100644
--- a/frontend/src/components/types/index.ts
+++ b/frontend/src/components/types/index.ts
@@ -26,5 +26,4 @@ export type InputProps = {
 
 export type MermaidRendererProps = {
   code: string;
-  isDarkTheme: boolean;
 };
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 0a0d0780..67cc1c34 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -490,7 +490,6 @@ const ConversationBubble = forwardRef<
                         ) : (
                           <div className="my-4 w-full" style={{ minWidth: '100%' }}>
                             <MermaidRenderer
-                              isDarkTheme={isDarkTheme}
                               code={segment.content}
                             />
                           </div>