Text colors for mermaid mindmap graph are unreadable in dark mode

Bug reports
,
1

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:
image

Results in this:

image
image738Ă—445 16.9 KB

In light mode it is so beautiful:
image

2

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

1 Like
3

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.

4

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

5

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.

6

I already regret, that I put my personal taste into this topic with using this “beautiful” adjective. :smile: 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?

7

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; 
}
8
  1. Just install Dune-mermaid.css and activate it
  2. download mgMeyers Style Settings plugin from Obsidians plugin repo and activate it
  3. 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.

1 Like
9

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:
image

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

10

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

1 Like
11

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.

12

An update for Dune-mermaid comes tonight :slightly_smiling_face:

13

Very nice, that looks way better:

image

14

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

15

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?

16

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.

17

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.

18

We will change the way we handle mermaid styling in v1.8.

It should solve/ameliorate this issue.

19

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.