fix: resolve mermaid theme switching issue from dark to light mode (#9745)

src/renderer/src/components/Preview/MermaidPreview.tsx

@@ -18,7 +18,7 @@ const MermaidPreview = ({
   enableToolbar = false,
   ref
 }: BasicPreviewProps & { ref?: React.RefObject<BasicPreviewHandles | null> }) => {
-  const { mermaid, isLoading: isLoadingMermaid, error: mermaidError } = useMermaid()
+  const { mermaid, isLoading: isLoadingMermaid, error: mermaidError, forceRenderKey } = useMermaid()
   const diagramId = useRef<string>(`mermaid-${nanoid(6)}`).current
   const [isVisible, setIsVisible] = useState(true)
 
@@ -56,7 +56,7 @@ const MermaidPreview = ({
         document.body.removeChild(measureEl)
       }
     },
-    [diagramId, mermaid]
+    [diagramId, mermaid, forceRenderKey]
   )
 
   // 可见性检测函数

src/renderer/src/components/Preview/__tests__/MermaidPreview.test.tsx

@@ -60,7 +60,8 @@ describe('MermaidPreview', () => {
     mocks.useMermaid.mockReturnValue({
       mermaid: mockMermaid,
       isLoading: false,
-      error: null
+      error: null,
+      forceRenderKey: 0
     })
 
     mocks.useDebouncedRender.mockReturnValue(createMockHookReturn())
@@ -116,7 +117,8 @@ describe('MermaidPreview', () => {
       mocks.useMermaid.mockReturnValue({
         mermaid: mockMermaid,
         isLoading: true,
-        error: null
+        error: null,
+        forceRenderKey: 0
       })
 
       render(<MermaidPreview>{mermaidCode}</MermaidPreview>)
@@ -145,7 +147,8 @@ describe('MermaidPreview', () => {
       mocks.useMermaid.mockReturnValue({
         mermaid: mockMermaid,
         isLoading: false,
-        error: mermaidError
+        error: mermaidError,
+        forceRenderKey: 0
       })
 
       render(<MermaidPreview>{mermaidCode}</MermaidPreview>)
@@ -173,7 +176,8 @@ describe('MermaidPreview', () => {
       mocks.useMermaid.mockReturnValue({
         mermaid: mockMermaid,
         isLoading: false,
-        error: mermaidError
+        error: mermaidError,
+        forceRenderKey: 0
       })
       mocks.useDebouncedRender.mockReturnValue(createMockHookReturn({ error: renderError }))
 

src/renderer/src/hooks/useMermaid.ts

@@ -33,6 +33,7 @@ export const useMermaid = () => {
   const { theme } = useTheme()
   const [isLoading, setIsLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
+  const [forceRenderKey, setForceRenderKey] = useState(0)
 
   // 初始化 mermaid 并监听主题变化
   useEffect(() => {
@@ -51,6 +52,7 @@ export const useMermaid = () => {
           theme: theme === ThemeMode.dark ? 'dark' : 'default'
         })
 
+        setForceRenderKey((prev) => prev + 1)
         setError(null)
       } catch (error) {
         setError(error instanceof Error ? error.message : 'Failed to initialize Mermaid')
@@ -71,6 +73,7 @@ export const useMermaid = () => {
   return {
     mermaid: mermaidModule,
     isLoading,
-    error
+    error,
+    forceRenderKey
   }
 }