From 87d1dd87d680a92bc935c17bf28891641c326ed5 Mon Sep 17 00:00:00 2001
From: Mark Crossfield <Mark.Crossfield@autotrader.co.uk>
Date: Fri, 4 Nov 2022 21:14:02 +0000
Subject: [PATCH] Use configurable mermaid theme (default `dark`)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 _config.yml                       | 1 +
 _layouts/reveal.html              | 6 +++++-
 _posts/0000-01-09-svg-diagrams.md | 6 ++----
 assets/css/mermaid.css            | 5 +++++
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/_config.yml b/_config.yml
index 31aee93..5c8d1e4 100644
--- a/_config.yml
+++ b/_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:
diff --git a/_layouts/reveal.html b/_layouts/reveal.html
index 4341a8e..d990817 100644
--- a/_layouts/reveal.html
+++ b/_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
diff --git a/_posts/0000-01-09-svg-diagrams.md b/_posts/0000-01-09-svg-diagrams.md
index a86da6b..96628a3 100644
--- a/_posts/0000-01-09-svg-diagrams.md
+++ b/_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;" -->
 
diff --git a/assets/css/mermaid.css b/assets/css/mermaid.css
index 0546ee5..d0ca8bd 100644
--- a/assets/css/mermaid.css
+++ b/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;
 }
\ No newline at end of file