docs: adjust green color in light theme

README.md

@@ -14,7 +14,7 @@
 </p>
 
 `typst.ts` is a project dedicated to bring the power of [Typst](https://github.com/typst/typst) to the world of JavaScript. In short, it provides an `typst::World` implementation and several exporters to help compile and render your Typst document. In the scope of server-side rendering collaborated by
-$\textcolor{#2ecc40}{\textsf{server}}$ and $\textcolor{#0074d9}{\textsf{browser}}$, there would be a data flow like this:
+$\textcolor{#3c9123}{\textsf{server}}$ and $\textcolor{#0074d9}{\textsf{browser}}$, there would be a data flow like this:
 
 <p align="center">
   <picture>

docs/cookery/introduction.typ

@@ -5,7 +5,7 @@
 
 = Introduction
 
-Typst.ts is a project dedicated to bring the power of #link("https://github.com/typst/typst")[Typst] to the world of JavaScript. In short, it composes ways to compile and render your Typst document. In the scope of server-side rendering collaborated by #text(fill: green, "server") and #text(fill: blue, "browser"), there would be a data flow like this basically:
+Typst.ts is a project dedicated to bring the power of #link("https://github.com/typst/typst")[Typst] to the world of JavaScript. In short, it composes ways to compile and render your Typst document. In the scope of server-side rendering collaborated by #text(fill: rgb("#3c9123"), "server") and #text(fill: blue, "browser"), there would be a data flow like this basically:
 
 #figure(
   {

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

@@ -6,7 +6,7 @@
 #show link: underline
 
 #figure(
-  data-flow-graph(stroke: white, bg-color: rgb(13, 17, 23)),
+  data-flow-graph(stroke: white, bg-color: rgb(13, 17, 23), light-theme: false),
   caption: [Browser-side module needed: $dagger$: compiler; $dagger.double$: renderer. ],
   numbering: none,
 )

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

@@ -5,7 +5,7 @@
 #show link: underline
 
 #figure(
-  data-flow-graph(stroke: black, bg-color: white),
+  data-flow-graph(stroke: black, bg-color: white, light-theme: true),
   caption: [Browser-side module needed: $dagger$: compiler; $dagger.double$: renderer. ],
   numbering: none,
 )

github-pages/docs/data-flow.typ

@@ -1,8 +1,21 @@
 #import "/contrib/typst/diagram.typ": node, arr, commutative_diagram
-#import "/docs/cookery/templates/page.typ": main-color, background-color
+#import "/docs/cookery/templates/page.typ": main-color, background-color, is-light-theme
 
-#let data-flow-graph(stroke: main-color, bg-color: background-color) = {
+#let forest = rgb("43a127")
+
+#let data-flow-graph(
+  stroke: main-color,
+  bg-color: background-color,
+  light-theme: is-light-theme,
+) = {
   let arr = arr.with(stroke: stroke)
+
+  let adj-green = if light-theme {
+    forest.darken(10%)
+  } else {
+    green
+  }
+
   commutative_diagram(
     node_padding: (70pt, 50pt),
     bg-color: bg-color,
@@ -19,11 +32,11 @@
       #link("https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas")[Canvas] ( `<canvas/>` )
     ]),
     arr((0, 0), (0, 2), [
-      #set text(fill: green)
+      #set text(fill: adj-green)
       `precompile with theme and screen settings`
     ]),
     arr((0, 0), (1, 1), label_pos: 0.8em, {
-      set text(fill: green)
+      set text(fill: adj-green)
       rotate(17deg)[
         `compile to svg`
         #set text(fill: blue)

github-pages/docs/readme-draft.typ

@@ -50,7 +50,7 @@
 
 #show: project
 
-Typst.ts is a project dedicated to bring the power of #link("https://github.com/typst/typst")[Typst] to the world of JavaScript. In short, it composes ways to compile and render your Typst document. In the scope of server-side rendering collaborated by #text(fill: green, "server") and #text(fill: blue, "browser"), there would be a data flow like this:
+Typst.ts is a project dedicated to bring the power of #link("https://github.com/typst/typst")[Typst] to the world of JavaScript. In short, it composes ways to compile and render your Typst document. In the scope of server-side rendering collaborated by #text(fill: rgb("#3c9123"), "server") and #text(fill: blue, "browser"), there would be a data flow like this:
 
 #figure(
   data-flow-graph(),