Blogging platform with advanced tools for arts and sciences.
Fix diagram dark theme bug
+12
-3
+12
-3
app/components/PreviewRenderer.tsx
+12
-3
app/components/PreviewRenderer.tsx
···
14
14
* wrapper elements with data attributes containing the source code.
15
15
*/
16
16
17
-
import React, { useEffect, useRef, useCallback } from 'react'
17
+
import React, { useEffect, useRef, useCallback, useState } from 'react'
18
18
import { createRoot } from 'react-dom/client'
19
19
import DOMPurify from 'dompurify'
20
20
import mermaid from 'mermaid'
···
36
36
const PreviewRenderer: React.FC<PreviewRendererProps> = ({ htmlContent }) => {
37
37
const containerRef = useRef<HTMLDivElement>(null)
38
38
const functionPlotTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
39
+
const [isDark, setIsDark] = useState(() => document.documentElement.classList.contains('dark'))
40
+
41
+
useEffect(() => {
42
+
const observer = new MutationObserver(() => {
43
+
setIsDark(document.documentElement.classList.contains('dark'))
44
+
})
45
+
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
46
+
return () => observer.disconnect()
47
+
}, [])
39
48
40
49
// Debounced function plot processing to avoid excessive re-rendering while typing
41
50
const processFunctionPlots = useCallback(() => {
···
159
168
// Initialize mermaid with the same settings as the working version
160
169
mermaid.initialize({
161
170
startOnLoad: false,
162
-
theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' :'default',
171
+
theme: isDark ? 'dark' : 'default',
163
172
securityLevel: 'strict', // 'loose' | 'antiscript' | 'strict' | 'sandbox'
164
173
})
165
174
···
371
380
clearTimeout(functionPlotTimeoutRef.current)
372
381
}
373
382
}
374
-
}, [htmlContent, processFunctionPlots])
383
+
}, [htmlContent, processFunctionPlots, isDark])
375
384
376
385
return (
377
386
<div ref={containerRef} className="prose-styles">