Mermaid diagrams don't play nice with dark interface themes

[moritzreiter]

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:

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:

Steps to reproduce

1. 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)
2. Create a note with a Mermaid diagram
3. Open the preview

Environment

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

[Rokt33r]

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

[moritzreiter]

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.

[yougotwill]

@anothernode Fixed 👍 #2231

[IssueHuntBot]

@BoostIO funded this issue with $30. Visit this issue on Issuehunt

[yougotwill]

Looks like it's my lucky day 😆

[kazup01]

yay🎉

[kazup01]

@yougotwill Don't forget to apply for the rewarding 😄
https://issuehunt.io/repos/53266139/issues/2215

[IssueHuntBot]

@yougotwill has started working. Visit this issue on Issuehunt

[IssueHuntBot]

@yougotwill has submitted output. Visit this issue on Issuehunt