Drawn entities don't work properly with dark mode enabled.

[nickolasdeluca]

Describe the bug
Drawn entities don't work properly with dark mode enabled.

Steps To Reproduce
Steps to reproduce the behavior:

1. Turn on dark mode.
2. Create a page.
3. Edit the page.
4. Draw any entity on flowchart.
5. Save drawing.

Expected behavior
I believe all entities should have their colors inverted. Black turns White and White turns black. Fonts, lines and all objects.

Screenshots

Your Configuration (please complete the following information):

• Exact BookStack Version (Found in settings): v0.31.2
• PHP Version: 7.4.9 (cli) (built: Aug 7 2020 14:29:10) ( NTS )
• Hosting Method (Nginx/Apache/Docker): Nginx

[ssddanbrown]

Hi @nickolasdeluca,

This is going to be the case for an user images that are on transparent backgrounds. I wouldn't really be comfortable inverting the color of images by default as we'd be altering user content and it's likely to have side-affects. A simple inversion is not always what would be wanted.

If this is a problem on your instance, you could set a default white background to drawings (and a border for padding) using the following in your "Custom HTML Head Content" setting:

<style>
.page-content img[src*="/drawio/"] {
  background-color: #FFF;
  border: 12px solid #FFF;
}
</style>

Or if you did want inversion in dark mode:

<style>
.dark-mode .page-content img[src*="/drawio/"] {
  filter: invert(1);
}
</style>

[TechInterMezzo]

Hi @ssddanbrown,
I am a bit late for this issue but I found the "keepTheme" option in the docs of draw.io. It seems to be an optional parameter for the export action and should apply the current draw.io theme when rendering the png. So when you turn on the draw.io dark mode then the appearance of the saved PNG should match.

I think you would only need to add
keepTheme: true
to
https://github.com/BookStackApp/BookStack/blob/development/resources/js/services/drawio.js#L58

But I haven't tested it myself.

[EricKotato]

Hi @ssddanbrown, I am a bit late for this issue but I found the "keepTheme" option in the docs of draw.io. It seems to be an optional parameter for the export action and should apply the current draw.io theme when rendering the png. So when you turn on the draw.io dark mode then the appearance of the saved PNG should match.

I think you would only need to add keepTheme: true to https://github.com/BookStackApp/BookStack/blob/development/resources/js/services/drawio.js#L58

But I haven't tested it myself.

Can confirm, adding keepTheme:1 (same as keepTheme: true) to export indeed saves with current draw.io theme.

So I'd like to see it introduced too, at least as an option.