How to change the 'user color' for a User Journey Diagram in mermaid.js?

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!

Solution

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.