tsdiagram xyflow/react theming

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!

Jul 26 '24 15:07 jhvst

Hey, thank you so much for the tip! Started looking into the upgrade today, managed to break a few things in https://github.com/3rd/tsdiagram/pull/16

Jul 26 '24 22:07 3rd

FWIW I dumped my code here: https://github.com/jhvst/jhvst.github.io/commit/0c5ea25f90f3a2d9aba088c21611647fdeae05e2#diff-b7771b1224785d0d94a1ce9651cc994fe7e2aabaf936202ecb6a5f3ccf739110

Jul 27 '24 11:07 jhvst