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:

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.