Proper method to set default mermaid colors for all diagrams

[aforsythe]

What is the preferred method to properly set the default mermaid diagram colors for all diagrams on a site?

[fralau]

Would that info on dark mode in the readme; as well as on the autoconfigure, be helpful?

[aforsythe]

Sorry I don't think I'm following .. For instance, if I'm looking to change the color of a the stroke of all the diagrams, where would that be set?

[fralau]

Oh, sorry, I thought you were speaking about "dark" versus "light" mode.

I am not a specialist, but your question deals with css styling in mermaid.

In the context of mkdocs, you should declare the necessary css file in mkdoc's config file, under extra_css.

I hope this helps?

[aforsythe]

It's probably my lacking CSS skills, but I can't seem to figure out the proper class / attribute to manipulate to effect all the nodes / diagrams on a page.

[fralau]

The standard approach, I guess, would be to use your browser web tools to explore the tagging of the HTML page, as well as the css currently applied to it.

Yes, css has its own mystique. I can do some basic stuff, but for the higher incantations, you mind find clues by asking directly to the developers of Mermaid. Perhaps @squidfunk, the author of the great material theme for mkdocs., who has a accumulated a vast wisdom in his online documentation, could give you a hint?

I realize that one of the characteristics of the mkdocs ecosystem, is the fragmentation of the knowledge between the specialists of markdown, mkdocs (basic), the plugin developers, the theme designers, the authors of javascripts libraries, etc.

[squidfunk]

You can definitely do it with CSS. It's exactly what I did for the Mermaid integration, which uses the primary and accent colors which you configure via mkdocs.yml, and even respects dark mode. It's currently in Insiders, but given the current growth, I suspect it's going to be released in the community edition soon.