Block Preview Does Not Support Dark Mode or Math Typesetting

[chronos1970]

Plugin Version: 1.2 Logseq Version: 0.9.18 Platform: Windows 10, 21H2, 64 bit

The block preview in Logseq always displays in light mode even if the draw.io diagram was made in dark mode and/or Logseq dark mode is enabled. Additionally, the block preview can't render Latex math expressions.

Draw.io Editor:

Block Preview:

Maximize View:

[lee88688]

can you give an example file of this?

[chronos1970]

Here is the diagram file (SVG) created by the plugin using /create (it's in light mode despite being created in dark mode):

Plugin embedding: {{renderer :drawio, 1696245442365.svg}}

Normal SVG embedding: ![1696245442365.svg](../assets/1696245442365_1696658118020_0.svg)

SVG embedding after manually exporting the diagram in drawio:

[lee88688]

@chronos1970 can you export this drawio file and attach it to this issue's comment?

[chronos1970]

Creating a diagram with the plugin only saves the file in SVG format. I have uploaded the SVG file created as the previous comment's first attachment. I have recreated the same file in draw.io if that's what you want. system.zip

[chronos1970]

Here is the manually exported version as well (SVG):

[lee88688]

@chronos1970 how to export like this. as I use online version to export as svg, the font color or rectangle's background will mannally write to element's style. because of that I can not change the color to fit dark mode in a very easy way.

maybe I should change the svg background to white. this may not fit dark mode but it can display well in dark mode.

[chronos1970]

From the top header select File -> Export As -> SVG. Then make sure the Dark option is selected. This works in both the online/plugin version. and the locally installed version

[lee88688]

I tried it. the font color or fill color is specified at export. so it is hard to auto change light theme to dark at runtime. maybe currently only light theme is displayed.

[chronos1970]

If it's not possible to change at runtime, then I think a plugin setting to export to dark mode by default would suffice. However, this wouldn't solve the issue of Latex math expressions not rendering in the block preview (see above images).

[lee88688]

this plugin uses drawio embed mode. when export to svg, there is only a keepTheme option which is used to export dark when using dark mode. after exporting, there is no other way to change embeded svg in block. so just use light mode.

Latex math expressions not rendering in the block preview is a bug, this can be soved later.

[chronos1970]

I think if someone is using Logseq dark mode, then surely they would want to create dark themed draw.io diagrams. Otherwise they wouldn't be visible. So, is it possible to have a plugin setting that enables keepTheme option, or a way to make newly created diagrams (using /create) be in dark mode by default?

Thanks for your time on this issue.

[lee88688]

when create in dark mode editor, the diagram is dark and keep this until you edit in light mode editor. I think this is not acceptable.

[chronos1970]

Right now, diagrams are practically invisible in Logseq dark mode. Unless you want to alter SVG colors (on the fly) before rendering, you have to export to dark mode or blind Logseq dark mode users with a white background. Users attaching images to Logseq don't expect them to change from dark mode to light mode on their own. Likewise, I don't think users expect SVG that they created in dark mode to be magically turned into light mode. Regardless, I propose that this behavior be configurable in the plugin's settings.

[lee88688]

the new version fix block preview problem.

[chronos1970]

Thanks for the fix! I can confirm math expressions render correctly now. The white background makes diagrams created in dark mode visible now. Although I understand this might not be feasible, It would be great if we could, somehow, have dark themed diagrams for dark mode users.