Use configurable mermaid theme (default dark)

I’ve added CSS to change edge labels to use a blurred backdrop rather than having a solid fill, as it makes them feel like entities on their own in the diagram with the theme defaults.

Author: mrmanc

_config.yml

@@ -36,6 +36,7 @@ reveal_path: reveal.js/
 
 # mermaid.js diagram integration
 mermaid_diagrams: true
+mermaid_theme: dark # See https://mermaid-js.github.io/mermaid/#/theming?id=deployable-themes
 
 # Exclude directories and/or files from the conversion
 exclude:

_layouts/reveal.html

@@ -52,6 +52,10 @@
 					<script type="text/template">
 {%
 						assign lines = post.content | newline_to_br | strip_newlines | split: "<br />"
+%}{%
+						assign mermaid_theme = site.mermaid_theme | default: 'dark'
+%}{%
+						assign mermaid_span = '<!-- .slide: class="diagram-slide" data-transition="none"--><span class="diagram-data" style="display:none;">%%{init: {&#39;theme&#39;:&#39;' | append: mermaid_theme | append: '&#39;}}%%'
 %}{%
 						for line in lines
 %}{% 
@@ -63,7 +67,7 @@
 								| replace:'</backgroundimage>','" --> '
 								| replace:'<backgroundimageopacity>','<!-- .slide: data-background-opacity="'
 								| replace:'</backgroundimageopacity>','" -->'
-								| replace:'<mermaid>','<!-- .slide: class="diagram-slide" data-transition="none"--><span class="diagram-data" style="display:none;">'
+								| replace:'<mermaid>',mermaid_span
 								| replace:'</mermaid>','</span><div class="diagram-display" style="height: 300px;"></div>'
 %}{%
 							assign first_char = line | strip

_posts/0000-01-09-svg-diagrams.md

@@ -1,10 +1,8 @@
 # SVG Diagrams
 
-<background>white</background>
-
 You can use [mermaid-js](https://mermaid-js.github.io/mermaid/) to create SVG diagrams.
 
-(enable the feature by setting `mermaid_diagrams` to `true` in `_config.yml`)
+(in `_config.yml` enable the feature by setting `mermaid_diagrams` to `true`, and override the [theme](https://mermaid-js.github.io/mermaid/#/theming?id=deployable-themes) with `mermaid_theme`)
 
 <!-- .element: style="font-size: 50%;" -->
 
@@ -14,7 +12,7 @@ graph TD;
     A-->C;
     B-->D;
     C-->D;
-    D-->E
+    D-->|an edge label| E
 </mermaid>
 <!-- .element: style="height: 250px;" -->
 

assets/css/mermaid.css

@@ -8,4 +8,9 @@ div.diagram-display svg {
     max-width: 100% !important;
     width: 100%;
     height: 100%;
+}
+span.edgeLabel, .edgeLabel rect {
+    background: none !important;
+    backdrop-filter: blur(10px);
+    fill: none !important;
 }