Merge pull request #1172 from oasisprotocol/xz/1070-mermaid-dark-mode

docs: Add dark mode CSS to Mermaid SVGs

Author: aefhm

README.md

@@ -206,6 +206,14 @@ There are three kinds of image assets used in the docs.
    diagram source will be stored along in the .svg file and you will
    be able to edit it in the future.
 
+#### Dark Mode
+
+We aim to support dark mode when introducing new assets. We prefer to include
+assets with dark mode friendly CSS using `@media (prefers-color-scheme: dark)`
+when possible. We generate Mermaid diagrams with dark mode CSS injected, and
+export [diagrams.net](https://diagrams.net) diagrams with a transparent
+background and "Automatic" appearance.
+
 ## Vocabulary
 
 The following is a consistent case-sensitive collection of Oasis-related terms,

docs/build/diagrams/opl-contract-flow.mmd.svg

@@ -0,0 +1,91 @@
+.actor, .labelBox {
+    stroke: black !important;
+    stroke-width: 1.5px !important;
+    fill: #007bff !important;
+}
+
+.note {
+    fill: #007bff !important;
+    stroke-width: 1px !important;
+    stroke: black !important;
+}
+
+.noteText tspan, .actor tspan, .labelText {
+    fill: white !important;
+}
+
+.loopText, .loopText tspan {
+    fill: #007bff !important;
+}
+
+.actor-line {
+    stroke: #007bff !important;
+    stroke-width: 1px;
+}
+
+.messageText, .loopText, .labelText, .noteText {
+    font-size: 15px !important;
+    stroke: none !important;
+    background: white !important;
+}
+
+.loopLine, line {
+    stroke: #333 !important;
+    stroke-width: 1px;
+    fill: none !important; 
+}
+
+.activation0 {
+    fill: #eaecef;
+    stroke: #333;
+}
+
+@media (prefers-color-scheme: dark) {
+    background-color: #1b1b1d !important;
+
+    #arrowhead path{fill:white !important;stroke:white !important;}
+
+    .actor, .labelBox {
+        stroke: white !important;
+        stroke-width: 1.5px !important;
+        fill: #1E88E5 !important;
+    }
+
+    .note {
+        fill: #1E88E5 !important;
+        stroke-width: 1px !important;
+    }
+    
+    .noteText tspan, .actor tspan, .labelText {
+        fill: white !important;
+    }
+    
+    .actor-line {
+        stroke: white !important;
+        stroke-width: 1px;
+    }
+    
+    .messageLine0, line {
+        stroke: white !important;
+    }
+
+    .messageText, .labelText, .noteText {
+        font-size: 15px !important;
+        fill: white !important;
+    }
+
+    .loopText, .loopText tspan {
+        font-size: 15px !important;
+        fill: #1E88E5 !important;
+    }
+
+    .loopLine, line {
+        stroke: white !important;
+        stroke-width: 1px;
+    }
+
+    .activation0 {
+        fill: #666666 !important;
+        stroke: white;
+    }
+}

docs/build/diagrams/opl-hyperlane-flow.mmd.svg

@@ -1,9 +1,9 @@
 {
-	"themeCSS": ".actor, .labelBox { stroke: black !important; stroke-width: 1.5px !important; fill: #007bff !important } .note { fill: #007bff !important; stroke-width: 1px !important; stroke: black !important; } .noteText tspan, .actor tspan, .labelText { fill: white !important; } .loopText, .loopText tspan { fill: #007bff !important; } .actor-line { stroke: #007bff !important; stroke-width: 1px; } .messageText, .loopText, .labelText, .noteText { font-size: 15px !important; stroke: none !important; background: white !important; } .loopLine, line { stroke: #333 !important; stroke-width: 1px; fill: none !important;  } .activation0 { fill: #eaecef; stroke: #333; }",
-	"deterministicIds": true,
-	"fontFamily": "Noto Sans",
-	"actorFontFamily": "Noto Sans",
-	"noteFontFamily": "Noto Sans",
-	"messageFontFamily": "Noto Sans",
-	"personFontFamily": "Noto Sans"
+  "themeCSS": ".actor, .labelBox { stroke: black !important; stroke-width: 1.5px !important; fill: #007bff !important;}.note { fill: #007bff !important; stroke-width: 1px !important; stroke: black !important;}.noteText tspan, .actor tspan, .labelText { fill: white !important;}.loopText, .loopText tspan { fill: #007bff !important;}.actor-line { stroke: #007bff !important; stroke-width: 1px;}.messageText, .loopText, .labelText, .noteText { font-size: 15px !important; stroke: none !important; background: white !important;}.loopLine, line { stroke: #333 !important; stroke-width: 1px; fill: none !important; }.activation0 { fill: #eaecef; stroke: #333;}@media (prefers-color-scheme: dark) { background-color: #1b1b1d !important; #arrowhead path{fill:white !important;stroke:white !important;} .actor, .labelBox { stroke: white !important; stroke-width: 1.5px !important; fill: #1E88E5 !important; } .note { fill: #1E88E5 !important; stroke-width: 1px !important; }  .noteText tspan, .actor tspan, .labelText { fill: white !important; }  .actor-line { stroke: white !important; stroke-width: 1px; }  .messageLine0, line { stroke: white !important; } .messageText, .labelText, .noteText { font-size: 15px !important; fill: white !important; } .loopText, .loopText tspan { font-size: 15px !important; fill: #1E88E5 !important; } .loopLine, line { stroke: white !important; stroke-width: 1px; } .activation0 { fill: #666666 !important; stroke: white; }}",
+  "deterministicIds": true,
+  "fontFamily": "Noto Sans",
+  "actorFontFamily": "Noto Sans",
+  "noteFontFamily": "Noto Sans",
+  "messageFontFamily": "Noto Sans",
+  "personFontFamily": "Noto Sans"
 }

docs/build/diagrams/opl-hyperlane-pingpong-flow.mmd.svg

@@ -6,7 +6,8 @@
     "docusaurus": "docusaurus",
     "start": "docusaurus start --no-open",
     "build": "docusaurus build",
-    "diagrams": "find -L docs -name '*.mmd' -exec mmdc -i {} -p puppeteer-config.json -c mermaid.config.json ';'",
+    "mermaid:theme": "CSS_STRING=$(tr -s ' ' < mermaid-theme.css | tr -d '\n') && jq --arg themeCSS \"$CSS_STRING\" '.themeCSS = $themeCSS' mermaid.config.json > mermaid.config.json.temp && mv mermaid.config.json.temp mermaid.config.json",
+    "diagrams": "yarn mermaid:theme && find -L docs -name '*.mmd' -exec mmdc -i {} -p puppeteer-config.json -c mermaid.config.json ';'",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",