From f21bf3d86036e7438e41006d9925f7de12063730 Mon Sep 17 00:00:00 2001
From: PilgrimLyieu <PilgrimLyieu@outlook.com>
Date: Tue, 18 Mar 2025 13:48:32 +0800
Subject: [PATCH] fix(mermaid): Mermaid theme not change after theme toggling

---
 src/renderer/src/hooks/useMermaid.ts          |  1 -
 .../src/pages/home/Markdown/Mermaid.tsx       | 24 +++++++++++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/renderer/src/hooks/useMermaid.ts b/src/renderer/src/hooks/useMermaid.ts
index 59771525..5d6f0b1d 100644
--- a/src/renderer/src/hooks/useMermaid.ts
+++ b/src/renderer/src/hooks/useMermaid.ts
@@ -18,7 +18,6 @@ export const useMermaid = () => {
         startOnLoad: true,
         theme: theme === ThemeMode.dark ? 'dark' : 'default'
       })
-      window.mermaid.contentLoaded()
     })
   }, [theme])
 
diff --git a/src/renderer/src/pages/home/Markdown/Mermaid.tsx b/src/renderer/src/pages/home/Markdown/Mermaid.tsx
index c0285d72..90c70727 100644
--- a/src/renderer/src/pages/home/Markdown/Mermaid.tsx
+++ b/src/renderer/src/pages/home/Markdown/Mermaid.tsx
@@ -1,5 +1,6 @@
-import React, { useEffect } from 'react'
-
+import React, { useEffect, useRef } from 'react'
+import { useTheme } from '@renderer/context/ThemeProvider'
+import { ThemeMode } from '@renderer/types'
 import MermaidPopup from './MermaidPopup'
 
 interface Props {
@@ -7,16 +8,29 @@ interface Props {
 }
 
 const Mermaid: React.FC<Props> = ({ chart }) => {
+  const { theme } = useTheme()
+  const mermaidRef = useRef<HTMLDivElement>(null)
+
   useEffect(() => {
-    window?.mermaid?.contentLoaded()
-  }, [])
+    if (mermaidRef.current && window.mermaid) {
+      mermaidRef.current.innerHTML = chart
+      mermaidRef.current.removeAttribute('data-processed')
+      if (window.mermaid.initialize) {
+        window.mermaid.initialize({
+          startOnLoad: true,
+          theme: theme === ThemeMode.dark ? 'dark' : 'default'
+        })
+      }
+      window.mermaid.contentLoaded()
+    }
+  }, [chart, theme])
 
   const onPreview = () => {
     MermaidPopup.show({ chart })
   }
 
   return (
-    <div className="mermaid" onClick={onPreview} style={{ cursor: 'pointer' }}>
+    <div ref={mermaidRef} className="mermaid" onClick={onPreview} style={{ cursor: 'pointer' }}>
       {chart}
     </div>
   )