Boostnote: Mermaid diagrams don't play nice with dark interface themes

Created on 19 Jul 2018 · 10Comments · Source: BoostIO/Boostnote

Mermaid support introduced with #2173 is absolutely awesome! 👏👍

There's just a small problem with readability of texts in the diagrams when using one of the dark interface themes:

Current behavior

Some text in Mermaid diagrams in the preview panel is not readable when using one of the dark interface themes:

screen shot 2018-07-19 at 11 39 43

Expected behavior

All text in Mermaid diagrams should be readable when using one of the dark interface themes, as it is the case for light interface themes:

screen shot 2018-07-19 at 11 40 15

Steps to reproduce

Set the interface theme to a dark theme (the screenshot shows Solarized Dark, but it's the same with the two other dark interface themes)
Create a note with a Mermaid diagram
Open the preview

Environment

Version : 0.11.8
OS Version and name : macOS High Sierra 10.13.6

Source

anothernode

All 10 comments

Haha, yeah, we need to fix it. I assume a single line of css code, which is setting a background color, should be enough.

Rokt33r on 19 Jul 2018

I noticed that Mermaid itself seems to have different themes (note the default, dark, neutral and forest folders in the output below):

~/dev/Boostnote/node_modules/mermaid/src/themes> ls
class.scss     default        forest         git.scss       neutral
dark           flowchart.scss gantt.scss     mermaid.scss   sequence.scss

Maybe it's just a matter of somehow activating Mermaids dark theme if Boostnote runs with a dark interface theme?

I'd love to help more, but unfortunately I'm not at all familiar with Electron so I have no idea from what angle to tackle that task.

anothernode on 19 Jul 2018

@anothernode Fixed 👍 https://github.com/BoostIO/Boostnote/pull/2231