I am trying to style and color the User Colours for a User Journey Diagram in mermaidjs.
Unfortunately, I have not been able to find the user color properties.
Is it possible to change the user color?
I have tried changing all theme colors. These change their respective area colors. None apply to user colors. Including fillType0 to fillType9 e.g.:
%%{
init: {
'theme': 'dark',
'fillType0': '#f00',
'themeVariables': {
'fillType1': '#f00',
'lineColor': '#f00',
'primaryColor': '#f00',
'primaryTextColor': '#fff',
'primaryBorderColor': '#0f0',
'secondaryColor': '#f00',
'tertiaryColor': '#f00'
}
}
}%%
journey
title User journey
section Sect1
Do something: 1: Me, Cat
section Sect2
Do other thing: 5: Me, Cat
The colors for ‘Me‘ and ‘Cat‘ remain pegged to the theme. They do not change with any property that I can find.
Any help with mermaidjs syntax would be greatly appreciated!
I have not checked how the theme colors work, but there are certain styles you cannot influence with the theme, see also Mermaid style color/fill/stroke of an entity or attribute in ER diagram.
However, if you know the mermaid renderer, you can override the theme-specific colors with a CSS rule that you include in the mermaid preamble. The snippet below shows this with a YAML preamble, but it should also be possible with a JSON preamble like you use.
<script type="module" src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs"></script>
<pre class="mermaid">
---
config:
themeCSS: |
circle[fill="#8FBC8F"] {fill: red;}
---
journey
title User journey
section Sect1
Do something: 1: Me, Cat
section Sect2
Do other thing: 5: Me, Cat
</pre>I admit this is a bit cumbersome, because you have to know the theme specific-colors (#8FBC8F) to include them in the CSS selector.
1