Export SVG with CSS responsive Light and Dark themes

[AdamCoulterOz]

• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Is your feature request related to a problem? Please describe.
I use drawio for a lot of technical documentation in source control. I export to the SVG format and reference the images in markdown files. With the advent of light/dark modes, my diagrams often become unreadable in dark mode. There is no way to have an exported diagram change between light and dark.

Describe the solution you'd like
You've clearly put a lot of work into the light/dark editing in drawio. When I switch between light and dark in the drawio app, the colours used for my diagram invert and I can clearly see the diagram. Could these "alternate themes" be embedded in the SVG file exports with @media (prefers-color-scheme: dark) { ... } CSS styles so your colour invertions can come along for the ride when exported, i.e. the SVG changes to dark based on the browser it's being viewed in? It would be very cool.

Describe alternatives you've considered
The workaround is to export my diagrams with a solid white background.

Additional context
Example screenshots without changing anything about the diagram itself other than switching between light and dark mode.

[alderg]

You can manually add a style in the defs section as described here. We're planning to add an option for this in the SVG export dialog in one of the upcoming releases.

[AdamCoulterOz]

@alderg that is awesome, I just manually inserted that style section in the defs block, and it worked perfectly. Is having this baked into the export function far away?

[alderg]

We'll update this ticket when it's added. Can't give an ETA.

[alderg]

It has been added to the export dialog:

[AdamCoulterOz]

@davidjgraph - I've installed the latest version for the last few weeks, I haven't seen it released yet? What commit was it added in?

[davidjgraph]

The change in the dialog is there in the core build at version 22.0.5:

[davidjgraph]

The commit was ec5dcc2. The 21.8.0 release.

[AdamCoulterOz]

@davidjgraph - that doesn't have the Automatic option shown in @alderg's previous post which is the specific feature "responsive" we are talking about. :-)

[AdamCoulterOz]

@davidjgraph, what you've referenced is different than what this issue was talking about. The screenshot from @alderg is the actual thing I was looking for.

[AdamCoulterOz]

@alderg / @davidjgraph - can I please get an answer regarding this one? because its still not implemented. It was supposed to be in v22 and now v23 is here, but this feature still isn't.

[davidjgraph]

23.0.2 shows:

What browser are you using?

[AdamCoulterOz]

@davidjgraph desktop on macOS

[alderg]

Check Improve Contrast under Extras, Appearance for the option to appear in the Export SVG dialog in draw.io desktop:

[AdamCoulterOz]

thanks @alderg, that wasn't immediately obvious, I've been checking regularly for it for ages. I've noticed that this setting isn't remembered when you re-open an exported "theme-automatic.drawio.svg", so when you save it (and it automatically syncs the exported SVG), it loses the automatic part. Can it be persisted to exported file's mxfile attributes and read back when reading back in an exported model, so subsequent saves keep it?