Merge pull request #71 from scalar-labs/change-mermaid-style

Apply centering and Scalar brand colors to Mermaid diagrams
scalar-labs · Nov 3, 2023 · 4a8df6d · 4a8df6d
2 parents 3a541f4 + b48fa24
commit 4a8df6d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/_includes/scripts.html b/_includes/scripts.html
@@ -32,7 +32,15 @@
   $(document).ready(function () {
     mermaid.initialize({
       startOnLoad:true,
-      theme: "default",
+      theme: "base", // Modified the Mermaid theme to match Scalar brand colors, as listed below; originally `theme: "default",` (modified by josh-wong).
+      themeVariables: {
+        primaryColor: "#D5EAFF",
+        primaryTextColor: "#3D4144",
+        primaryBorderColor: "#2673BB",
+        lineColor: "#3D4144",
+        secondaryColor: "#D5EAFF",
+        tertiaryColor: "#D5EAFF",
+      }
     });
     window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
   });

diff --git a/_layouts/mermaid.html b/_layouts/mermaid.html
@@ -3,7 +3,7 @@
   $(document).ready(function () {
     mermaid.initialize({
       startOnLoad:true,
-      theme: "default",
+      theme: "base",
     });
     window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
   });

diff --git a/_sass/minimal-mistakes/_syntax.scss b/_sass/minimal-mistakes/_syntax.scss
@@ -348,4 +348,11 @@ figure.highlight {
   th, td {
     border-bottom: 0;
   }
-}
+}
+
+/* Make Mermaid diagrams centered (added by josh-wong). */
+.language-mermaid {
+  display: block;
+  margin: auto;
+  text-align: center;
+}