Dark theme for better contrast on darker backgrounds

[crodriguez1a]

@knsv Let me know if this will work ( mermaid/test/mix-dark-theme.html). There were a couple items with inline(generated) styles. Let me know how you'd want to address the following.

Inline styles on flow charts

• dotted lines C-.->D
• double line == testing ==>
• marker-end #arrow[some-id]

[knsv]

Thanks! Looks great!

Maybe we should document this somewhere.

[crodriguez1a]

@knsv Sure. Glad to contribute! I'll look for through the docs and find a place to document.

[vstirbu]

I've developed an extension to preview mermaid diagrams in Visual Studio Code. At his time, it works well on light theme but is not working properly with the dark theme.

This PR would help solve our issue too. Thanks!

[vstirbu]

Just noticed that the PR is merged but the npm registry is not updated.

[knsv]

True. There are lots of good stuff in the trunk that should be released. Am a little behind with that.

[knsv]

This is now part of release 6.0.0. Thx.

[dideler]

Came across this theme in the changelog and it's exactly what we need, but I can't figure out how to configure it and I couldn't find any relevant docs.

We're using mermaid like this.

<script src="https://unpkg.com/mermaid@8.1.0/dist/mermaid.min.js"></script>
<script>
  var config = {
    startOnLoad:true,
    flowchart:{
        useMaxWidth:true,
        htmlLabels:true
    }
  };
  mermaid.initialize(config);
</script>

I tried looking for https://unpkg.com/mermaid@8.1.0/dist/mermaid.dark.css to set the stylesheet but the resource isn't found.

[colthreepv]

AFAIK you should use:

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

with themes enumerated here

Also in more recent versions (8.2 +) there are no .css files to include, as the require is dynamic

[IOrlandoni]

Hey, if you find that the documentation is not clear in the subject, feel free to send a pull request to improve it or open an issue. I'll lock the conversation so we don't spam a 3+ years old pull request.