Text colors for mermaid mindmap graph are unreadable in dark mode

buster-blob · October 3, 2023, 6:22pm

Steps to reproduce

Switch obsidian to dark mode, make a new note with a mermaid code block of the type mindmap (see Screenshots below)

Expected result

Expected result is some readable text.

Actual result

Some of the texts are just unreadable, others are hard to read.
See screenshot below.

Environment

SYSTEM INFO:
Obsidian version: v1.4.14
Installer version: v1.4.13
Operating system: #202302191831~1677858327~22.04~3cea1be SMP PREEMPT_DYNAMIC Fri M 6.2.0-76060200-generic
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Restricted mode: off
Plugins installed: 1
Plugins enabled: 1
1: Advanced Tables v0.19.1

Additional information

This:

Results in this:

In light mode it is so beautiful:

Jopp · October 5, 2023, 9:05pm

Meh, with these fat connection lines… I really hope the guys behind mermaid are going to change this detail

Anyway, you could try my dune-mermaid theme snippet, it’s complementary to my theme Dune, but should work standalone too.

EDIT
please download mgMeyers Style Settings plugin, so you can change mermaid colors dynamically from Obsidians preferences>Style Settings>Dune - mermaid

buster-blob · October 6, 2023, 7:16am

Aesthetics most of the time is a lot personal preferences, just.
Thanks for you reply and you ressource. I look into it and try to find a solution.
I am a beginner with the obisidan environment, but I think your css snippet and this link will work it out for me.

Jopp · October 6, 2023, 9:38am

Ops, i forgot to add, you need to install the plugin “Style Settings” if you want to customize colors of my snippet, no dev console needed. After installing, click “Style Settings” in your Preferences Window then you’ll see a new entry called Dune - mermaid

blue_emperor · October 6, 2023, 11:36am

Me too. The second screenshot looks fine, but it’s far from being beautiful. Anyway the most important thing in Mermaid is usability, which means there should be versatile web editor where newcomers could easily create diagrams and then copy them elsewhere. Obviously Mermaid is designed to be accessed by scripts and programs, but the initial setup step requires user intervention, and that initial step could be improved by having versatile GUI editor.

buster-blob · October 6, 2023, 2:18pm

I already regret, that I put my personal taste into this topic with using this “beautiful” adjective. Sorry for that, lesson learnt, can we move on?
I appreciate your engagement sharing your thought whether the diagram is beautiful or not, but that is not what this topic is about. Also the question whether mermaid’s tools usability is good or bad deserves a discussion, but not here please.

I will share my solution, once I come around to work on it.

@Jopp:
If you want to help me advance quicker, maybe you can help me understanding this: can I also incorporate the mermaid color changes with putting a few entries into a custom theme.css or can these specific changes only made with these snippet-things together with the “Style Settings” plugin?

Craig · October 6, 2023, 2:32pm

Yes, you can change the Mermaid mindmap colors using a styling CSS. I use light mode, so my colors will be different than yours, and you will probably need to change the .theme-light to .theme-dark:

/* 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; 
}

Jopp · October 6, 2023, 4:03pm

Just install Dune-mermaid.css and activate it
download mgMeyers Style Settings plugin from Obsidians plugin repo and activate it
open Obsidians preferences>community plugins>style settings and click on Dune-mermaid, to change mermaid diagram colors.

If you use Craig’s snippet you’ll get fixed colors, but with my snippet you can change colors dynamically thanks the color picker of style settings

Will update my mermaid theme tonight, to add newly introduced features by the mermaid devs.

eikowagenknecht · October 20, 2023, 3:49pm

Can you also add styles for git labels, for example in this diagram:

---
title: Semantic Release - Distribution Channels
---
gitGraph
    commit id: "feat: initial commit" tag: "v1.0.0"
    commit id: "fix: fix 1" tag: "v1.0.1"
    branch next
    commit id: "feat!: a big feature" tag: "v2.0.0@next"
    commit id: "fix: fix sth in big feature" tag: "v2.0.1@next"
    checkout main
    commit id: "feat: feat 1" tag: "v1.1.0"
    checkout next
    merge main tag: "v2.1.0@next"
    checkout main
    merge next tag: "v2.1.0@latest"

Labels are currently unreadable:

Bonus internet points if you can also make the diagram title non-overlapping with the labels.

Jopp · October 20, 2023, 4:19pm

You’re welcome. Piece of cake!
Personally I don’t use all mermaid diagrams so details like this may evade my judgment.

I’m just waiting on similar requests WITH examples like yours to improve my Dune mermaid theme.
If you have more reports feel free to post them here or open a ticket on my github issue tracker

eikowagenknecht · October 20, 2023, 5:06pm

Sounds great! I read your comment that there is a new version already? Where can I find it? https://github.com/Jopp-gh/Obsidian-Dune84/blob/main/snippets/Dune-mermaid.css was last updated 2 weeks ago.

Jopp · October 20, 2023, 6:52pm

An update for Dune-mermaid comes tonight

eikowagenknecht · October 21, 2023, 6:35am

Very nice, that looks way better:

Jopp · October 21, 2023, 7:43am

Indeed! I tried to place the title a bit higher but that didn’t work ( as the upper part of the letters gets cut) . Maybe I tried too little but I guess that’s it.
Thanks for your feedback

Nick2 · January 23, 2024, 8:33pm

Anybody know how to get this “Style Settings” plugin to work? I installed, and then downloaded the “dune-mermaid.css” and stuck it everywhere I could think of (direct in vault, in .obsidian/snippets, in .obsidian/themes, …) - instructions aren’t clear where it is supposed to go - but it doesn’t matter, when I go to the “Style Settings” I just get “No style settings found”. Does this plugin no longer work with the latest Obsidian version?

Nick2 · January 23, 2024, 8:43pm

Follow up and for others who have this issue - once you copy the file, you have to go into the Obsidian settings under “Appearance” and scroll to the bottom and “turn on” that css file, otherwise is seems the “Style Settings” plugin won’t find the file.

Jopp · January 25, 2024, 4:15pm

Hi Nick,
You’re welcome to report any issue you encounter with Dune and its snippets here or on my github page

I placed Dune-mermaid.css in a folder called snippets and so I assumed everyone interested would know where to place this file in Obsidian. And yes, all snippets need to be enabled to work properly. Here’s the help page how to install snippets : CSS snippets - Obsidian Help

The style settings plugin does all the magic, Obsidian doesn’t know other colors than those default ones. I understand it may be confusing if a snippet applies a theme. Once mermaid gets a proper update, I’ll add it back to my Dune theme.