Adjusting Mermaid mindmap colors

[Craig]

Hi all!

First off, big kudos to the Obsidian dev team for updating the Mermaid plugin, which now includes support for mind maps! I’ve really enjoyed using it to quickly brainstorm and visualize ideas.

I noticed that at least on my machine, the default mindmap node colors colors can sometimes make the black text hard to read. (This might be light-theme specific.) Here’s what it looks like for me:

Here is a CSS snippet I use to adjust the colors so that they’re more readable for me in the light theme:

/* Make mindmap colors readable */
.theme-light .mermaid {
    --color-red: #ff7777;
    --color-orange: #ffbb99;
    --color-yellow: #ffeeaa;
    --color-green: #bbffbb;
    --color-cyan: #bbffee;
    --color-blue: #aaccff;
    --color-purple: #ddbbff;
    --color-pink: #ffcccc; 
}

This is what the same diagram looks like with the snippet enabled:

Hope this is helpful to someone else.

Craig

[mzee]

Hi Craig,

I came across the same issue as you’ve solved here.
However the instructions listed isn’t getting me to the result.

What I tried was to add the following at the top of the markdown page in source mode:

---
/* Make mindmap colors readable */
.theme-light .mermaid {
    --color-red: #ff7777;
    --color-orange: #ffbb99;
    --color-yellow: #ffeeaa;
    --color-green: #bbffbb;
    --color-cyan: #bbffee;
    --color-blue: #aaccff;
    --color-purple: #ddbbff;
    --color-pink: #ffcccc; 
}

However, my end result is still the same (I don’t want yellow there, as with white it text doesn’t contrast well enough).

Here’s the mindmap code:

mindmap
    Root
        A[A]
        :::urgent large
        B(B)
        Cdd

Any help to get this sorted appreciated!

[Craig]

Hi @mzee ,

Thanks for your note. I think you have two issues to solve:

Using CSS Snippets

First, CSS snippets don’t go in the note, they are individual files in a special folder in your vault. I recommend you read the Obsidian docs on CSS files, but here’s a summary:

1. Put the CSS code into a text file in the special directory .obsidian/snippets under your vault folder, for example /home/mzee/Vault/.obsidian/snippets/mermaid.css.
2. Under Obsidian settings → Appearance → CSS Snippets, make sure the file you just added is selected. For example:

Once you’ve done that, you should see the effects of the CSS being applied.

Light Mode vs. Dark Mode

Second, the CSS snippet I pasted above is for light mode. I expect the colors will not work well in dark mode. I don’t use dark mode much myself, but you can perhaps try these instead as a starting place:

/* Make mindmap colors readable (Light mode) */
.theme-light .mermaid {
    --color-red: #ff7777;
    --color-orange: #ffbb99;
    --color-yellow: #ffeeaa;
    --color-green: #bbffbb;
    --color-cyan: #bbffee;
    --color-blue: #aaccff;
    --color-purple: #ddbbff;
    --color-pink: #ffcccc;
}

/* Make mindmap colors readable (Dark mode) */
.theme-dark .mermaid {
    --color-red: #933;
    --color-orange: #963;
    --color-yellow: #993;
    --color-green: #393;
    --color-cyan: #399;
    --color-blue: #339;
    --color-purple: #639;
    --color-pink: #966;
}

/* Override root text color in mermaid 
 * so that it's the same color as regular node text */
.mermaid .section-root text {
    fill: inherit !important;
}

This is what they look like in my vault in dark mode:

I hope this helps. Please let us know how you make out.

Good luck!

Craig

[dcsan]

thanks for taking time to write this out, it solved for me!

[miguelmarcos]

@Craig

mermaid.css

Thanks so much for the CSS snippets below. I really appreciate it.