Merge pull request #2231 from yougotwill/mermaid_dark_theme_fix

Mermaid dark theme rendering fix
BoostIO · Aug 9, 2018 · 5aae9a4 · 5aae9a4
2 parents cfe3cae + 16c62cd
commit 5aae9a4
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
@@ -554,7 +554,7 @@ export default class MarkdownPreview extends React.Component {
     _.forEach(
       this.refs.root.contentWindow.document.querySelectorAll('.mermaid'),
       (el) => {
-        mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML))
+        mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme)
       }
     )
   }

diff --git a/browser/components/render/MermaidRender.js b/browser/components/render/MermaidRender.js
@@ -1,5 +1,11 @@
 import mermaidAPI from 'mermaid'
 
+// fixes bad styling in the mermaid dark theme
+const darkThemeStyling = `
+.loopText tspan { 
+  fill: white; 
+}`
+
 function getRandomInt (min, max) {
   return Math.floor(Math.random() * (max - min)) + min
 }
@@ -13,8 +19,13 @@ function getId () {
   return id
 }
 
-function render (element, content) {
+function render (element, content, theme) {
   try {
+    let isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai'
+    mermaidAPI.initialize({
+      theme: isDarkTheme ? 'dark' : 'default',
+      themeCSS: isDarkTheme ? darkThemeStyling : ''
+    })
     mermaidAPI.render(getId(), content, (svgGraph) => {
       element.innerHTML = svgGraph
     })