Adjustment in Mermaid ERD Colors to improve Readability in Dark Mode

[BalduinLandolt]

Context

No response

Description

Currently, mermaid entity relationship diagrams look good in dark mode, if the entities do not contain any attribute definitions, as in the example here.

When defining attributes, it still looks readable in light mode, but in dark mode it is not readable at all. See the visuals for illustration.

As it turns out, to change the CSS behavior of mermaid diagrams like this, a custom theme needs to be created, which is not as convenient as most users would like to have it.

I found that the issue at hand can be found here:

mkdocs-material/src/assets/stylesheets/main/integrations/_mermaid.scss

Line 33 in e496f77

--md-mermaid-node-bg-color: var(--md-accent-fg-color--transparent);

Here, a foreground color is applied to a background item, which is not surprising to cause some issues.
Changing the line to --md-mermaid-node-bg-color: var(--md-default-bg-color); changed the coloring to be in line with how other mermaid elements are rendered, and is much more readable (again, see visuals).

Arguably, a solution with two shades of color alternating would correspond better with the official mermaid rendering, but I think even the simple, proposed solution would be an improvement.

If this change is approved, I'd be happy to open a PR from my fork, or see this incorporated in any other way.

Related links

• ER Diagram example in docs
• modifying CSS in mermaid is limited

Use Cases

This wouldn't introduce drastic change, some ER diagrams would just suddenly be more readable in dark mode.

Visuals

status quo

currently, in light mode, all looks ok:

but in dark mode it's not really readable

proposed change

Before submitting

• I have read and followed the change request guidelines.
• I have verified that my idea is a change request and not a bug report.
• I have ensured that, to the best knowledge, my idea will benefit the entire community.
• I have included relevant links to the documentation, related issues and discussions to underline the need for my idea.

[squidfunk]

Thanks for reporting! You're invited to open a PR for this. Please make sure that all other diagram types still work, i.e., don't have any unintended side effects – just check the diagrams documentation for that.

[squidfunk]

On another note: we could certainly make diagrams more configurable by adding more CSS variables that target specific properties of elements. If you're interested in crafting a PR for that for discussion, this is definitely something to be considered for merging. We might need a few loops to iterate towards a good solution, but I think it could be a great addition to the project, making Mermaid.js customization easier.

[BalduinLandolt]

Thanks for getting back! I'll open a PR soon (hopefully even today).

Should I also update the example diagrams, so that more cases (like the one I reported) become visible? Or would you like to keep that separate?

In terms of exposing more CSS variables: Sounds interesting to try, but I don't want to promise anything I can't keep. If I find time, I might give it a shot sometime. But I also don't want to claim the task and block someone else who might be quicker at implementing it.

[squidfunk]

Should I also update the example diagrams, so that more cases (like the one I reported) become visible? Or would you like to keep that separate?

That would be perfect! We should try to have as many specimen as possible in the example diagams while keeping them short, so try to strive a balance.

In terms of exposing more CSS variables: Sounds interesting to try, but I don't want to promise anything I can't keep. If I find time, I might give it a shot sometime. But I also don't want to claim the task and block someone else who might be quicker at implementing it.

Don't worry, otherwise I'll tackle this some time later.

[BalduinLandolt]

@squidfunk I don't mean to rush you, just in case you didn't get notified: The PR (which turned out rather small) is ready for review: #4984

[squidfunk]

I did get notified, I'll look into it asap.

[squidfunk]

Fixed in f759841.

[squidfunk]

Released as part of 9.0.12.

[BalduinLandolt]

Thanks for fixing it, I'm looking forward to using it with the fixed colors :)