Dark scheme

Global configuration:

use(rehypeDiagram, {
  darkScheme: "...", // one of 2 options
});

or local configuration

```some-diagram darkScheme=...
diagram text
```

undefined is a default option.

Options

undefined

<figure class="beoe">only one image</figure>

class

<figure class="beoe">
  <div>
    <img class="beoe-light" src="..." />
    <img class="beoe-dark" src="..." />
  </div>
</figure>

You would need to add CSS, something like this:

html[data-theme="light"] .beoe-dark {
  display: none;
}

html[data-theme="dark"] .beoe-light {
  display: none;
}

media

<figure class="beoe">
  <picture>
    <img src="..." />
    <source media="(prefers-color-scheme: dark)" src="..." />
  </picture>
</figure>

Tag vs dark scheme

	class	media	via css
svg (inline)	yes with caveats (1)	no	possible
img (data-url, file)	yes	yes	no
iframe, embed (data-url, file)	yes	no	no

(1) - for example, works for Mermaid, but doesn’t work for D2 (check with light mode):

Diagram

Markdown

```d2 strategy=inline darkScheme=class pad=20
direction: right
a -> b -> c -> d -> e
```