Optimize mermaid view

layout/includes/third-party/math/mermaid.pug

@@ -54,6 +54,11 @@ script.
       if (!clone.getAttribute('xmlns:xlink') && clone.outerHTML.includes('xlink:')) {
         clone.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink')
       }
+      // inject background to match current theme
+      const isDark = document.documentElement.getAttribute('data-theme') === 'dark'
+      const bg = getComputedStyle(document.body).backgroundColor || (isDark ? '#1e1e1e' : '#ffffff')
+      if (!clone.style.background) clone.style.background = bg
+
       const serializer = new XMLSerializer()
       const svgSource = serializer.serializeToString(clone)
       const blob = new Blob([svgSource], { type: 'image/svg+xml;charset=utf-8' })
@@ -276,6 +281,7 @@ script.
           attachMermaidViewerButton(item)
         }
 
+
         // mermaid v9 and v10 compatibility
         typeof renderFn === 'string' ? renderMermaid(renderFn) : renderFn.then(({ svg }) => renderMermaid(svg))
       })

source/css/_layout/third-party.styl

@@ -68,6 +68,7 @@ if hexo-config('mermaid.enable')
     position: relative
     margin: 0 0 20px
     text-align: center
+    background: var(--card-bg)
 
     .mermaid-open-btn
       position: absolute