We are currently planning to migrate to a different platform for the forum. We will announce this fact both here and on Twitter, once we have settled on a solution.
Mermaid custom styling
Hi all,
I am trying to use a custom CSS to change the style of mermaid diagrams.
I mainly use the Berlin Light theme and my doc has a mermaid gantt chart.
The gantt chart looks quite bad by default:
- The background is way too dark for the black font that is used for the chart elements
- The font is very small
I want to change that by using a custom CSS. I managed to change the background color, my custom CSS looks like this:
body .mermaid-chart svg {
background-color: var(--grey-0);
border-radius: 5px;
}
But I cannot for the life of me figure out how to change font color, font size, or some of the other settings (like color of the chart elements etc).
I know that custom Mermaid styling is in the backlog, but is there a way to achieve the same with a custom CSS? If yes, how?
Thanks for helping a CSS noob out here!
Best,
Ben
Tagged: