Text colors are not correct in VSCODE

[cilerler]

As you can see it in the screenshot, ALT,OPT,LOOP titles are not visible. (text is there, it is just a dark color which makes it very difficult to read on dark theme.)

[tylerlong]

Mermaid has a dark theme which is suitable for dark backgrounds. https://unpkg.com/mermaid@7.0.0/dist/mermaid.dark.css

Not sure who developed the VS Code extension. You can tell the author to add a feature to switch mermaid theme.

[mjbvz]

I'm the author of the VSCode mermaid markdown extension. We do use the mermaid.dark.css stylesheet but I still don't see the colors being overridden properly. The root cause seems to be that the generated svg uses an inline style:

which overrides the dark css' .looptext and .labelText rules. Are there other steps required to use the dark theme?

[tylerlong]

Things have changed since 7.1.0.

https://github.com/mermaidjs/mermaid-live-editor/blob/master/src/index.js#L8

In earlier versions you specify a CSS file. After 7.1.0 you just specify an option. And yes styles are inline. In fact after 7.1.0 we don't provide separate CSS files at all.

You can still use 7.0.0. Then you can simply specify the dark theme css file. It's up to you.

[vstirbu]

Hello, I'm maintaining another vscode mermaid extension and we have the same issue although the extension is selecting correctly the theme: Mermaid-Chart/vscode-mermaid-preview#41.

The extension is using mermaid 7.1.0 so no way to mangle CSS files. We would appreciate if this issue is fixed in mermaid itself, rather than comping with hacks downstream :).

[tylerlong]

For now, is it possible for your guys to add window.mermaid_config = { theme: 'dark' } if you are using 7.1.0 ?

I am still doing lots of refactoring at the moment. If you want the old behavior, just use 7.0.0.

I will figure out the best solution before 8.0.0

Update(2018-03-16):

Latest syntax is mermaid.initialize({ theme: 'dark' }). No more global variables such as window.mermaid_config.

[vstirbu]

For the record, the problem is with the color of the text in the loops and alts in sequence diagrams. Even when using the dark theme, that text is black thus not visible in the dark:

Appreciate all the renovation work that you do, and waiting for 8.0.0...

[arjunachala]

I have used the dark theme of Mermaid. It seems to be working except for the arrows at the end of the connectors. You can see it here:

I am using the 7.0 codebase as suggested on this thread. Any help is appreciated. Thank you!

[cilerler]

@arjunachala please don't hi-jack the subject. This issue is about text and not shapes. Create another issue for that one please.

[arjunachala]

sorry about that! opened another issue at - #578

[mjbvz]

I've tried updating the VSCode extension to use 7.1, but even after passing in theme: 'dark' I don't see loops being styled properly.

@tylerlong Side note: using external style vs inline is also preferable for our use case since we allow dynamically changing styles. Not sure how to do that without a re-render currently

[ghost]

Has there been any progress on this issue?

[tylerlong]

Please try the latest version:

Code is:

mermaid.initialize({ theme: 'dark' });

It's not beautiful but I am a developer instead of a UI designer.

And if you want to change the colors, simply change this file and send a PR: https://github.com/knsv/mermaid/blob/master/src/themes/dark/index.scss

You can even create a new theme by creating a new .scss file.

[tylerlong]

Now it is also possible to write CSS to override CSS in theme: mermaidjs/mermaid.cli#24 (comment)