3rd/tsdiagram

xyflow/react theming

Opened this issue · 2 comments

jhvst commented

Hi there,

First off, thanks for the public code. I found it when trying to export SVG from React Flow.

I started with a new template which fetched the new @xyflow/react path. This had the downside of the theming to break: the charts would not have boxes around them, and lines.

After some painstaking troubleshooting, I found that the new themes use CSS variables to control the styles. The iframe code does not have the parent theming class applied, but adding the following fixes that:

    iframeDocument.body.classList.add("react-flow", "light")

This code is in the iframe listener code.

Thought to save you some time should you wish to upgrade!

3rd commented

Hey, thank you so much for the tip!
Started looking into the upgrade today, managed to break a few things in #16