Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark theme for better contrast on darker backgrounds #317

Merged
merged 4 commits into from
Mar 14, 2016

Conversation

crodriguez1a
Copy link
Contributor

@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 added a commit that referenced this pull request Mar 14, 2016
Dark theme for better contrast on darker backgrounds
@knsv knsv merged commit e9c6db4 into mermaid-js:master Mar 14, 2016
@knsv
Copy link
Collaborator

knsv commented Mar 14, 2016

Thanks! Looks great!

Maybe we should document this somewhere.

@crodriguez1a
Copy link
Contributor Author

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

@vstirbu
Copy link

vstirbu commented May 18, 2016

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
Copy link

vstirbu commented May 18, 2016

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

@knsv
Copy link
Collaborator

knsv commented May 18, 2016

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

@knsv
Copy link
Collaborator

knsv commented May 29, 2016

This is now part of release 6.0.0. Thx.

@d4nyll d4nyll mentioned this pull request Feb 20, 2017
@dideler
Copy link

dideler commented Jul 16, 2019

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
Copy link

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
Copy link
Member

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.

@mermaid-js mermaid-js locked as spam and limited conversation to collaborators Oct 2, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants