diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index c525f13a5..66ba249d0 100755
--- 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
index e057cf345..12dce327c 100644
--- 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
     })