Support responsive dark mode (#9)

This is only supported for the `img-png` and `img-svg` strategies. Dark mode is supported using a responsive `<picture>` element. The meta tag `color-scheme` is used to determine whether the light or dark diagram should be used by default when using a responsive picture element. Closes #6
remcohaszing · Jan 16, 2024 · b723871 · b723871
1 parent 0792706
commit b723871
Show file tree

Hide file tree

Showing 80 changed files with 2,865 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -19,7 +19,9 @@ A [rehype](https://rehype.js.org) plugin to render [mermaid](https://mermaid-js.
   - [`unified().use(rehypeMermaid, options?)`](#unifieduserehypemermaid-options)
     - [`options`](#options)
       - [`browser`](#browser)
+      - [`colorScheme`](#colorscheme)
       - [`css`](#css)
+      - [`dark`](#dark)
       - [`errorFallback`](#errorfallback)
       - [`launchOptions`](#launchoptions)
       - [`mermaidConfig`](#mermaidconfig)
@@ -128,6 +130,8 @@ example, this yields:
 
 This strategy is asynchronous.
 
+This strategy supports the [`dark`](#dark) option.
+
 ### `'img-svg'`
 
 This strategy renders a diagram as an `<img>` element with an inline SVG image. Given the example,
@@ -147,6 +151,8 @@ this yields:
 
 This strategy is asynchronous.
 
+This strategy supports the [`dark`](#dark) option.
+
 ### `'inline-svg'`
 
 This strategy renders a diagram as an inline `<svg>` element. Given the example, this yields:
@@ -165,6 +171,8 @@ This strategy renders a diagram as an inline `<svg>` element. Given the example,
 
 This strategy is asynchronous.
 
+This strategy does not support the [`dark`](#dark) option.
+
 ### `'pre-mermaid'`
 
 This strategy replaces the element with a `<pre class="mermaid">` element with only the diagram as
@@ -204,6 +212,8 @@ mermaid.initialize({ startOnLoad: true })
 
 This strategy is synchronous.
 
+This strategy does not support the [`dark`](#dark) option.
+
 ## API
 
 This package has a default export `rehypeMermaid`.
@@ -216,11 +226,24 @@ This package has a default export `rehypeMermaid`.
 
 The Playwright browser to use. (`object`, default: chromium)
 
+##### `colorScheme`
+
+The default color scheme.
+
+If not specified, `rehype-mermaid` will determine the color scheme based on the `color-scheme` meta
+tag. If this doesn’t exist, the default color scheme is `light`. (`string`)
+
 ##### `css`
 
 A URL that points to a custom CSS file to load. Use this to load custom fonts. This option is
 ignored in the browser. You need to include the CSS in your build manually. (`string` | `URL`)
 
+##### `dark`
+
+If specified, add responsive dark mode using a `<picture>` element.
+
+This option is only supported by the [`img-png`](#img-png) and [`img-svg`](#img-svg) strategies.
+
 ##### `errorFallback`
 
 Create a fallback node if processing of a mermaid diagram fails. If nothing is returned, the code

diff --git a/fixtures/code.lang-mermaid/img-png-dark-custom.html b/fixtures/code.lang-mermaid/img-png-dark-custom.html
@@ -0,0 +1,24 @@
+<html>
+  <head></head>
+  <body>
+    <p>
+      A `code` element with class "language-mermaid" should be replaced with the rendered diagram.
+    </p>
+    <picture
+      ><source
+        height="49"
+        id="mermaid-dark-0"
+        media="(prefers-color-scheme: dark)"
+        srcset="
+          data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAxCAYAAACs0jsDAAAAAXNSR0IArs4c6QAAAiZJREFUaIHtmF9IU2EYh5/NQRiu/130D8opYdBGLmhdKCNXlM2bsosQvCu6CIIg6CLoJoIuhYiu68KkjclQy0WlaLqy1SqJoE0jw0qwMc42NoedropE26DzLhZ+z+37nt/7wPk+vu8cUCgUirLEVKi4prXKbQb3vxCZm+dGKpCa+VPdUuhhM7gdNbbLdlt1SeR+EhgcymnprA/4O1EAe42N9sOHxOV+JzQ2ltPS2YI95pIaCKJEpVGi0ihRaZan6OP7UZxbz3Cu/bpkLEiL9vrD2HZuZnTwLV8/JySj5USTiTTDD8c5fd6LdVUlwa4RqWiQFA0Fn2MygauxDo/XSbBrBF3XpeLlRHt8YRqadlNlraT5+D6mp2Z5OvROKl5G9OPkDOMvJzna6gLAsdfGtu0b6e4clogHKdGeu6NYV6/E7qxGS2bQkhmamusZ6H9F4ltKYkTx+2gxdF3nXuAZWjKDx3FhUb3PH6btlMfoGOOikfB7pqdmuXj1JDtqNy2odVzx0935pDxEe31h1m2wcqytgYqKhSup5cR+rl26w+vIBHansc8ZQ2s0n5/nUd8LDhzZs0gS4GCLE4vFLLKpDIl+iH0hpWXxeOuXrK9db8XVuItQMMJcLm9klLFXX1u3hcinmwV7Om6dNTLiF8vz9lRKlKg0SlQaJSrNfyNa9GR6E4tzu/9BSSXSmeyKYj0FRb/DQDQWJxqLi4otRb7AT1yFQqEoY34Aiu6gIS6A+b0AAAAASUVORK5CYII=
+        "
+        width="41.671875" />
+      <img
+        alt=""
+        height="49"
+        id="mermaid-0"
+        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAxCAYAAACs0jsDAAAAAXNSR0IArs4c6QAAAhhJREFUaIHtmMFLk3EYxz/rFWNswexgINkyvKhhhwUKujHaVCw6hAcPeQ46SB27SAdv0UXCLv4LHYwcbfNlbDQWjSUkIUYQLQXZhHBzc2ytXm+h2DbofRYLf5/r93m/zwfe9+X98YJCoVC0JJZ64bOHn72A91+ItLVZnt9/2putmTe43tvptD7uvGSVNzvCp+ReuVwyXgB/LcoFp5WrnvPickf58iFfLpd+1p0501QDQZSoNEpUGiUqzekUTSSiTExcZ27ugWQtSIuurq7gdF4hlXrL7m5GslpONJ/PkUzGmZm5h91+jnD4lVQ1SIrGYmEsFgsu1zBut59Q6CWGYUjVy4nqeoChITc2mx2f7yaZzA5ra++k6mVEt7e/sbn5Eb//FgADA9fo6rpIMLgsUQ9Sorq+gs1mp69vkEJhn0Jhn9FRH4lElFxuT2JF4/NoIwzDIBJ5TbFYYHp67ESu6wGmpu6aXWNedH39PZnMDrOzj+juvnwsW1paIBhcbg1RXQ/gcHQwOXkHTdOOZePjt1lcfMLGxjr9/YOm9ph6RqvVKvF4hJGRGyckATyeMTRNE3mpTIlubX3l4KCIx+P/Y+5wdOByDROLhalUKmZWmbv1PT29hEKpujPz8wtmVvzmdJ6emokSlUaJSqNEpflvRBt+mTLpErz53lSJH+VfZxvNNBKNZtMlsumSnFUN2tstNX/iKhQKRQtzCGNtnFnfo13VAAAAAElFTkSuQmCC"
+        width="41.671875"
+    /></picture>
+  </body>
+</html>
diff --git a/fixtures/code.lang-mermaid/img-png-dark.html b/fixtures/code.lang-mermaid/img-png-dark.html
@@ -0,0 +1,24 @@
+<html>
+  <head></head>
+  <body>
+    <p>
+      A `code` element with class "language-mermaid" should be replaced with the rendered diagram.
+    </p>
+    <picture
+      ><source
+        height="49"
+        id="mermaid-dark-0"
+        media="(prefers-color-scheme: dark)"
+        srcset="
+          data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAxCAYAAACs0jsDAAAAAXNSR0IArs4c6QAAAglJREFUaIHtmLFvEmEYhx9AJOaDiQRCGSsYQ8LFGq8mVO6gmLiqXXHir6iDXeyf4MBQEzcbjIuNgx1gkEJTY2ADmS42NE6E5EJqEJw0Nm2h8T4Mpt+z/r77vU9yd7k3BwqFQjGXuCaFG2+/mC435r8QGf9wvdh4dP3befmVSRe73JjdTvPZUacxE7lf3Ew/PPYFAiXg70QBjjoNPr9/JV3uTxbv3D/2BQITz7hnaiARJSobJSobJSqbyymq6zpvSiWerq/LrAXZooZhYFkWmqYRDAZlVssT9fv93F5a4vX2NrZtk8lkZFWDTNGVVIox0Gg02KvVyGazsqpBpqhhmnw6OGAwGFCpVAiHQiSTSVn1ckQjkQjxWIxypQJAq9Wi2+2SW12VUQ+yRE3DwLZt2u02QgiEENTqdXRdJzBlfbsoU/fRi3AvnUYIwcutrVOZkU7zbmfH8QzHoolEgnAoRLFY5Ovh4YnsST5PLpebD1HDMOj1enzY3WU0Gp3IyuUyhUKBG/E4rXbb0RxHz6jH4+Hu8jL1/f1TkgAfq1WGwyFZCS+VI9FoNIoQgr1q9cy83+/TbDZZSaXwer1ORjm79ZZl8XhtbeKZ55ubTkb85nJuT7NEicpGicpGicrmvxGd+mUKLya59SA/U4mr1/y+aWcmio5HlBdiGgsxTarYmbO+n/8TV6FQKOaYn9QkiJHSc8gjAAAAAElFTkSuQmCC
+        "
+        width="41.671875" />
+      <img
+        alt=""
+        height="49"
+        id="mermaid-0"
+        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAxCAYAAACs0jsDAAAAAXNSR0IArs4c6QAAAhhJREFUaIHtmMFLk3EYxz/rFWNswexgINkyvKhhhwUKujHaVCw6hAcPeQ46SB27SAdv0UXCLv4LHYwcbfNlbDQWjSUkIUYQLQXZhHBzc2ytXm+h2DbofRYLf5/r93m/zwfe9+X98YJCoVC0JJZ64bOHn72A91+ItLVZnt9/2putmTe43tvptD7uvGSVNzvCp+ReuVwyXgB/LcoFp5WrnvPickf58iFfLpd+1p0501QDQZSoNEpUGiUqzekUTSSiTExcZ27ugWQtSIuurq7gdF4hlXrL7m5GslpONJ/PkUzGmZm5h91+jnD4lVQ1SIrGYmEsFgsu1zBut59Q6CWGYUjVy4nqeoChITc2mx2f7yaZzA5ra++k6mVEt7e/sbn5Eb//FgADA9fo6rpIMLgsUQ9Sorq+gs1mp69vkEJhn0Jhn9FRH4lElFxuT2JF4/NoIwzDIBJ5TbFYYHp67ESu6wGmpu6aXWNedH39PZnMDrOzj+juvnwsW1paIBhcbg1RXQ/gcHQwOXkHTdOOZePjt1lcfMLGxjr9/YOm9ph6RqvVKvF4hJGRGyckATyeMTRNE3mpTIlubX3l4KCIx+P/Y+5wdOByDROLhalUKmZWmbv1PT29hEKpujPz8wtmVvzmdJ6emokSlUaJSqNEpflvRBt+mTLpErz53lSJH+VfZxvNNBKNZtMlsumSnFUN2tstNX/iKhQKRQtzCGNtnFnfo13VAAAAAElFTkSuQmCC"
+        width="41.671875"
+    /></picture>
+  </body>
+</html>