Desktop,Mobile: Resolves #3201: Render mermaid diagrams in dark mode when Joplin is in dark mode (#9631)

packages/renderer/MdToHtml/rules/mermaid_render.js

@@ -13,23 +13,37 @@ function mermaidReady() {
 	//
 	// And that's going to make the lib set the `mermaid` object to the H1 element.
 	// So below, we double-check that what we have really is an instance of the library.
-	return typeof mermaid !== 'undefined' && mermaid !== null && typeof mermaid === 'object' && !!mermaid.init;
+	return typeof mermaid !== 'undefined' && mermaid !== null && typeof mermaid === 'object' && !!mermaid.initialize;
 }
 
+const isDarkMode = () => {
+	// If any mermaid elements are marked as requiring dark mode, render *all*
+	// mermaid elements in dark mode.
+	return !!document.querySelector('.mermaid.joplin--mermaid-use-dark-theme');
+};
+
 function mermaidInit() {
-	// Mermaid's wonderful API has two init methods: init() and initialize().
-	// init() is deprectated but works, and initialize() is recommended but doesn't
-	// work, so let's use init() for now.
 	if (mermaidReady()) {
+		const mermaidTargetNodes = document.getElementsByClassName('mermaid');
+
 		try {
-			mermaid.init();
+			const darkMode = isDarkMode();
+			mermaid.initialize({
+				// We call mermaid.run ourselves whenever the note updates. Don't auto-start
+				startOnLoad: false,
+
+				darkMode,
+				theme: darkMode ? 'dark' : 'default',
+			});
+			mermaid.run({
+				nodes: mermaidTargetNodes,
+			});
 		} catch (error) {
 			console.error('Mermaid error', error);
 		}
 
 		// Resetting elements size - see mermaid.ts
-		const elements = document.getElementsByClassName('mermaid');
-		for (const element of elements) {
+		for (const element of mermaidTargetNodes) {
 			element.style.width = '100%';
 		}
 	}
@@ -46,3 +60,14 @@ const initIID_ = setInterval(() => {
 		mermaidInit();
 	}
 }, 100);
+
+document.addEventListener('DOMContentLoaded', () => {
+	// In some environments, we can load Mermaid immediately (e.g. mobile).
+	// If we don't load it immediately in these environments, Mermaid seems
+	// to initialize and auto-run, but without our configuration changes.
+	if (mermaidReady()) {
+		mermaidInit();
+	} else {
+		clearInterval(initIID_);
+	}
+});