adopt dark

observablehq · Mar 20, 2024 · 20cf7eb · 20cf7eb
1 parent 263fe66
commit 20cf7eb
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 36 deletions.
diff --git a/src/client/stdlib/mermaid.js b/src/client/stdlib/mermaid.js
@@ -1,8 +1,12 @@
 import mer from "npm:mermaid";
+import {Generators} from "observablehq:stdlib";
 
 let nextId = 0;
-const theme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "neutral";
-mer.initialize({startOnLoad: false, securityLevel: "loose", theme});
+
+(async () => {
+  for await (const dark of Generators.dark())
+    mer.initialize({startOnLoad: false, securityLevel: "loose", theme: dark ? "dark" : "neutral"});
+})();
 
 export default async function mermaid() {
   const root = document.createElement("div");

diff --git a/src/markdown.ts b/src/markdown.ts
@@ -69,7 +69,7 @@ function getLiveSource(content: string, tag: string, attributes: Record<string,
     : tag === "dot"
     ? transpileTag(content, "dot", false)
     : tag === "mermaid"
-    ? transpileTag(content, "await mermaid", false)
+    ? transpileTag(content, "await dark, mermaid", false)
     : undefined;
 }
 

diff --git a/test/output/mermaid.html b/test/output/mermaid.html
@@ -1 +1 @@
-<div id="cell-68f6d8d0" class="observablehq observablehq--block observablehq--loading"></div>
+<div id="cell-96e42c05" class="observablehq observablehq--block observablehq--loading"></div>
diff --git a/test/output/mermaid.md.json b/test/output/mermaid.md.json
@@ -4,48 +4,67 @@
   "style": null,
   "code": [
     {
-      "id": "68f6d8d0",
+      "id": "96e42c05",
       "node": {
         "body": {
-          "type": "AwaitExpression",
+          "type": "SequenceExpression",
           "start": 0,
-          "end": 68,
-          "argument": {
-            "type": "TaggedTemplateExpression",
-            "start": 6,
-            "end": 68,
-            "tag": {
-              "type": "Identifier",
-              "start": 6,
-              "end": 13,
-              "name": "mermaid"
+          "end": 74,
+          "expressions": [
+            {
+              "type": "AwaitExpression",
+              "start": 0,
+              "end": 10,
+              "argument": {
+                "type": "Identifier",
+                "start": 6,
+                "end": 10,
+                "name": "dark"
+              }
             },
-            "quasi": {
-              "type": "TemplateLiteral",
-              "start": 13,
-              "end": 68,
-              "expressions": [],
-              "quasis": [
-                {
-                  "type": "TemplateElement",
-                  "start": 14,
-                  "end": 67,
-                  "value": {
-                    "raw": "graph TD;\n    A-->B;\n    A-->C;\n    B-->D;\n    C-->D;",
-                    "cooked": "graph TD;\n    A-->B;\n    A-->C;\n    B-->D;\n    C-->D;"
-                  },
-                  "tail": true
-                }
-              ]
+            {
+              "type": "TaggedTemplateExpression",
+              "start": 12,
+              "end": 74,
+              "tag": {
+                "type": "Identifier",
+                "start": 12,
+                "end": 19,
+                "name": "mermaid"
+              },
+              "quasi": {
+                "type": "TemplateLiteral",
+                "start": 19,
+                "end": 74,
+                "expressions": [],
+                "quasis": [
+                  {
+                    "type": "TemplateElement",
+                    "start": 20,
+                    "end": 73,
+                    "value": {
+                      "raw": "graph TD;\n    A-->B;\n    A-->C;\n    B-->D;\n    C-->D;",
+                      "cooked": "graph TD;\n    A-->B;\n    A-->C;\n    B-->D;\n    C-->D;"
+                    },
+                    "tail": true
+                  }
+                ]
+              }
             }
-          }
+          ]
         },
         "declarations": null,
         "references": [
           {
             "type": "Identifier",
             "start": 6,
-            "end": 13,
+            "end": 10,
+            "name": "dark"
+          },
+          {
+            "type": "Identifier",
+            "start": 12,
+            "end": 19,
             "name": "mermaid"
           }
         ],
@@ -54,7 +73,7 @@
         "expression": true,
         "async": true,
         "inline": false,
-        "input": "await mermaid`graph TD;\n    A-->B;\n    A-->C;\n    B-->D;\n    C-->D;`"
+        "input": "await dark, mermaid`graph TD;\n    A-->B;\n    A-->C;\n    B-->D;\n    C-->D;`"
       }
     }
   ]
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<div id="cell-68f6d8d0" class="observablehq observablehq--block observablehq--loading"></div>
		<div id="cell-96e42c05" class="observablehq observablehq--block observablehq--loading"></div>