Diagrams doesn't follow Astro's Automatic theme with inline: true config

[holene]

Describe the bug

When using the inline: true config option, the d2 graph theme doesn't respect the theme switcher from Astro.

To Reproduce

1. Set inline: true in astro.config.mjs
2. build
3. Observe image theme
4. switch page theme between "auto", "dark" and "light".
5. observe image theme not changing
6. Comment out inline: true in astro.config.mjs gives expected behaviour

Expected behavior

The graph theme should change according to "dark", "light", or "auto" settings in Astro.

How often does this bug happen?

Every time

System Info

macos: sequoia 15.1
arc: version 1.67.0 (55463)
chrome: version 130.0.6723.92
"astro": "^4.15.8",
"astro-d2": "^0.6.0",

Additional Context

No response

[HiDeoo]

Thanks for the feedback 🙌

This is very similar to #5 which unfortunately will require some upstream changes in D2 as the CSS code embedded in the SVGs is entirely generated by D2 and not something I have control over.

The current generated code relies on the prefers-color-scheme CSS media feature, which in the case of SVGs does not work for inlined SVGs.

For SVG and iframes, prefers-color-scheme lets you set a CSS style for the SVG or iframe based on the color-scheme of the parent element in the web page. SVGs must be used embedded (i.e., <img src="circle.svg" alt="circle" />) as opposed to inlined in HTML.

To properly support this feature with inlined SVGs, something like supporting dark/light themes based on a CSS class would be required (opened PR for this).

I'm tracking the linked PR to D2 so that I can update the plugin once the feature is available. In the meantime, I'll close the issue as it's not something I can fix on my end.