Dark mode with inline SVGs

[oemueller]

Describe the bug

When setting Astro D2 config inline to true the dark theme colors are not applied anymore.

For some reason the media query does not function in that case. Maybe someone has an idea why ..

To Reproduce

1. Update Astro config.

astroD2({
      skipGeneration: !!process.env['CI'] || !!process.env['VERCEL'],
      inline: true,
    }),

2. run preview

3. switch color theme

Expected behavior

dark / light colors are applied based on selected theme

How often does this bug happen?

Every time

System Info

No response

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.