Dark Mode and Font colors

[yehiasalam]

Hi,

I don't think it's an issue, but i am not sure whats the proper configuration to handle this case.

So I have the vscode and the extension running in dark mode, and I created a diagram as below:

The problem is whenever I embedded it to a markdown file. It look like this, with the code ![Payment Process](payments.drawio.svg "Payment Process"):

Not sure how to set this right?

[hediet]

The extension always uses the light theme to export diagrams to svg! Otherwise it would look aweful e.g. when embedded in github readmes.

I don't think it is easily possible to create colored transparent svg documents that look great on light and dark themes at the same time.

I think you can set a background color or set explicit colors that are theme-independent.

[pauloch8]

For me it would be better to the embedded drawio aways be in light theme. I think would be better if it was configurable to drawio assume the color theme of vscode or be always light (the original drawio app color).

[raghuvv]

I wanted to report this issue myself - saw it is already logged here.

How do we setup so that what we see is what we get? The default text color as well as default line color show one thing while editing and another when saving as PNG / rendering in markdown. How can we get these to match each other without having to manually select a different color for each piece of line or text?

[hediet]

How can we get these to match each other without having to manually select a different color for each piece of line or text?

I think if you use a light theme, they match up.

[raghuvv]

How can we get these to match each other without having to manually select a different color for each piece of line or text?

I think if you use a light theme, they match up.

Well most users are now using dark theme for all UI. I am guessing most of us who use dark mode exclusively on all our tools would prefer to use the same in VScode as well. Any reason this tool cannot have WYSIWYG while user is in dark mode? From a UX perspective that would be the default expected behavior -- render to PNG exactly what is shown while editing the diagram.

Currently i am doing trial and error switching back and forth between edit and rendered PNG to correct default colors that surprise me in PNG output.

Thanks for wonderful tool. I just started using this and find it extremely useful - think I am going to use it extensively in future, and hoping to get it setup for best workflow and productivity.

[hediet]

Currently i am doing trial and error switching back and forth between edit and rendered PNG to correct default colors that surprise me in PNG output.

I think this is a general problem of Draw.io (that I am not the author of). There is also Draw.io Desktop, if it works better for Dark mode, I can see what I can do to support it in VS Code.

[raghuvv]

Currently i am doing trial and error switching back and forth between edit and rendered PNG to correct default colors that surprise me in PNG output.

I think this is a general problem of Draw.io (that I am not the author of). There is also Draw.io Desktop, if it works better for Dark mode, I can see what I can do to support it in VS Code.

Ah okay -- thanks for that insight. Didnt know it was an issue with the parent tool itself. i understand the limitation in that case. Appreciate your response.

[generateui]

We're using the extension to create .drawio.svg files. They contain source diagram xml and render to images when included in markdown files. This is great, as it keeps the sources in one file and always synced.

We had the same problem too, that the editor is cool by supporting a dark vscode theme, but the rendering breaks down when included on rendered markdown (html) pages. White text on white backgrounds, blank lines on dark backgrounds, those kind of things.

I have solved this by

1. Rendering all .drawio.svg files inline (as opposed to <img src="graph.drawio.svg">
2. Adding a css stylesheet with a media query @media (prefers-color-scheme: dark) and overriding some styles on svg elements:

   rect:not([stroke="none"]) {
       /* show rect having white border */
       stroke:rgb(255, 255, 255) !important;
       /* render all backgrounds completely transparent */
       fill-opacity: 0;
   }
   svg div {
       color: rgb(255, 255, 255) !important;
   }
   path {
       stroke: rgb(255, 255, 255) !important;
   }

[orendin]

Hi all

Thanks from me as well for the great work with this tool! Very useful vs code extension.

I found issues as well with the dark theme (which I use by default for vs code). However, just figured out that I can simply change the extension's theme by setting:

• Open Command Palette (Ctrl-Shift-P)...
• Select Draw.io: Change Theme
• Select "Kennedy" or "Atlas"

This will render the extension on a white background, which then goes better with the GitHub Readmes or Markdown Viewers or the like. This "workaround" is good enough for me by far. I'm not too fussed about draw.io editor being in dark mode.

Cheers

Ben

[MNDaveC]

This still produces a PNG export that appears to be in Dark Mode... The extension is set to "atlas" and the Workbench is set to "Light (Visual Studio)".. MacOS is in Dark Mode

[PierreMarchand20]

Any news about this issue ? It seems that, at least to export PNG files, the extension should work since this fix : https://github.com/jgraph/drawio/issues/1590 but I cannot find the export options. But it would be nice if we could have drawio.svg where we could explicitly say which theme we want.

[xoofx]

As a workaround for this issue, I'm setting the color 808080 for all texts/arrows to allow the diagram to look "okish" on both a dark and light theme. It displays fine on vscode as well as on GitHub.

For example:

and

[fastfading]

the only simple way to do that is assign each line / text color once again. the default value will change depend on theme. and the default theme for svg is black.

[imdouyu]

The cause of this problem is that the export defaults to transparent background, and there is an option on the web side to make the background transparent.

[xpl0t]

To export a diagram with non transparent background, simply click anywhere on the page and check "Background Color" as demonstrated here:

In dark mode the markdown will look like this:

This works for both SVG & PNG.

However it might not work well if you use a dark drawio theme, so you might switch to a light theme as described here: https://github.com/hediet/vscode-drawio/issues/217#issuecomment-1056968054