docs: let data-flow graph aware theme settings

README.md

@@ -17,7 +17,10 @@
 $\textcolor{#2ecc40}{\textsf{server}}$ and $\textcolor{#0074d9}{\textsf{browser}}$, there would be a data flow like this:
 
 <p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/Myriad-Dreamin/typst.ts/blob/main/github-pages/docs/data-flow-standalone.dark.artifact.svg">
     <img width="100%" alt="Data Flow" src="https://github.com/Myriad-Dreamin/typst.ts/blob/main/github-pages/docs/data-flow-standalone.artifact.svg"/>
+  </picture>
 </p>
 
 Specifically, it first typically presents a typst document in three forms:

github-pages/docs/data-flow-standalone.dark.typ

@@ -0,0 +1,12 @@
+
+#import "data-flow.typ": data-flow-graph
+
+#set page(height: auto, width: auto, margin: 0.5em)
+#set text(fill: white)
+#show link: underline
+
+#figure(
+  data-flow-graph(stroke: white, bg-color: rgb(13, 17, 23)),
+  caption: [Browser-side module needed: $dagger$: compiler; $dagger.double$: renderer. ],
+  numbering: none,
+)

github-pages/docs/data-flow-standalone.typ

@@ -1,11 +1,11 @@
 
 #import "data-flow.typ": data-flow-graph
 
-#set page(height: auto, width: auto, margin: 0.5em, fill: white)
+#set page(height: auto, width: auto, margin: 0.5em)
 #show link: underline
 
 #figure(
-  data-flow-graph(),
+  data-flow-graph(stroke: black, bg-color: white),
   caption: [Browser-side module needed: $dagger$: compiler; $dagger.double$: renderer. ],
   numbering: none,
 )

github-pages/docs/data-flow.typ

@@ -1,46 +1,47 @@
 #import "/contrib/typst/diagram.typ": node, arr, commutative_diagram
 #import "/docs/cookery/templates/page.typ": main-color, background-color
 
-#let arr = arr.with(stroke: main-color)
-
-#let data-flow-graph() = commutative_diagram(
-  node_padding: (70pt, 50pt),
-  bg-color: background-color,
-  node((0, 0), [
-    Typst Documents
-  ]),
-  node((0, 2), [
-    Preprocessed Artifact
-  ]),
-  node((1, 1), [
-    #link("https://developer.mozilla.org/en-US/docs/Web/SVG")[SVG Document] ( `<svg/>` )
-  ]),
-  node((2, 1), [
-    #link("https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas")[Canvas] ( `<canvas/>` )
-  ]),
-  arr((0, 0), (0, 2), [
-    #set text(fill: green)
-    `precompile with theme and screen settings`
-  ]),
-  arr((0, 0), (1, 1), label_pos: 0.8em, {
-    set text(fill: green)
-    rotate(17deg)[
-      `compile to svg`
-      #set text(fill: blue)
-      #h(-0.5em) $space^dagger$
-    ]
-  }),
-  arr((0, 0), (2, 1), label_pos: -0.6em, curve: -25deg, {
-    set text(fill: blue)
-    rotate(35deg)[`directly render` #h(-0.5em) $ space^(dagger dot.c dagger.double)$]
-  }),
-  arr((0, 2), (1, 1), label_pos: -0.8em, {
-    set text(fill: blue)
-    rotate(-17deg)[`render to svg` #h(-0.5em) $ space^dagger.double$]
-  }),
-  arr((1, 1), (2, 1), []),
-  arr((0, 2), (2, 1), label_pos: 0.6em, curve: 25deg, {
-    set text(fill: blue)
-    rotate(-35deg)[`render to canvas` #h(-0.5em) $ space^(dagger.double)$]
-  }),
-)
+#let data-flow-graph(stroke: main-color, bg-color: background-color) = {
+  let arr = arr.with(stroke: stroke)
+  commutative_diagram(
+    node_padding: (70pt, 50pt),
+    bg-color: bg-color,
+    node((0, 0), [
+      Typst Documents
+    ]),
+    node((0, 2), [
+      Preprocessed Artifact
+    ]),
+    node((1, 1), [
+      #link("https://developer.mozilla.org/en-US/docs/Web/SVG")[SVG Document] ( `<svg/>` )
+    ]),
+    node((2, 1), [
+      #link("https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas")[Canvas] ( `<canvas/>` )
+    ]),
+    arr((0, 0), (0, 2), [
+      #set text(fill: green)
+      `precompile with theme and screen settings`
+    ]),
+    arr((0, 0), (1, 1), label_pos: 0.8em, {
+      set text(fill: green)
+      rotate(17deg)[
+        `compile to svg`
+        #set text(fill: blue)
+        #h(-0.5em) $space^dagger$
+      ]
+    }),
+    arr((0, 0), (2, 1), label_pos: -0.6em, curve: -25deg, {
+      set text(fill: blue)
+      rotate(35deg)[`directly render` #h(-0.5em) $ space^(dagger dot.c dagger.double)$]
+    }),
+    arr((0, 2), (1, 1), label_pos: -0.8em, {
+      set text(fill: blue)
+      rotate(-17deg)[`render to svg` #h(-0.5em) $ space^dagger.double$]
+    }),
+    arr((1, 1), (2, 1), []),
+    arr((0, 2), (2, 1), label_pos: 0.6em, curve: 25deg, {
+      set text(fill: blue)
+      rotate(-35deg)[`render to canvas` #h(-0.5em) $ space^(dagger.double)$]
+    }),
+  )
+}