In a Sequence Diagram the primaryColor config is ignored for participants' background color

[ebouchut]

Context

I configured a primaryColor in a sequence diagram on a page of a site using mkdocs-material version 9.0.12.
I expect the background color of the participant box to be the same as primaryColor, whereas it is not.

%%{
  init: {
    'theme': 'base',
      'themeVariables': {
        'primaryColor': 'lightgreen'
    }
  }
}%%
sequenceDiagram
    actor       user as User
    participant p    as Button

    user   ->>  p: click

Bug description

The diagram is not rendered as expected:

• ✅ The background color of the actor box (User) is the same as primaryColor which is expected.
• ❌ The background color of the participant box (Button) is white, which is not expected, I 🤔 .

Both Mermaid Live Editor and Github Previewer, use the primaryColor for the participant's background color. This is what I expected mkdocs-material to do.

My understanding of mermaid.js documentation is the following:

• actorBkg mentions that primaryColor is the default background color for an actor.
• MainBkg computed from primaryColor "should be" used in this case.

🤔 This is my understanding of this gray part of the documentation.
Let me know what you think about this.

%%{
  init: {
    'theme': 'base',
      'themeVariables': {
        'primaryColor': 'lightgreen'
    }
  }
}%%
sequenceDiagram
    actor       user as User
    participant p    as Button

    user   ->>  p: click

Loading

Related links

• Same diagram in Mermaid Live

Reproduction

example.zip

Steps to reproduce

1. Open http://127.0.0.1:8000/diagram/
2. In the sequence diagram, the background color of both the actor (User) and the participant (Button) boxes should be green.

Browser

No response

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction.

[squidfunk]

Thanks for reporting. Material for MkDocs Mermaid integration is a bit different – it automatically sets the colors to the accent color you choose when configuring the theme. We use CSS variables to override specific parts of Mermaid graphs.

This has several upsides, as mentioned in our documentation:

• Works with instant loading without any additional effort
• Diagrams automatically use fonts and colors defined in mkdocs.yml
• Fonts and colors can be customized with additional style sheets
• Support for both, light and dark color schemes

---

Fixed in 5065bf9. The sequence actors, which were rendered green in your example, are now also rendered using the defined accent color. This is consistent with the rendering of the rest of our Mermaid integration:

Additionally, this commit introduces a way to override accent colors on a per-diagram basis. When md_in_html is enabled, You can now wrap a Mermaid diagram with an accent color directive (possible values defined here):

<div data-md-color-accent="green" markdown>

``` mermaid
sequenceDiagram
    actor       user     as User
    participant p   as Button

    user     ->>  p: click
```

</div>

If you wish to override colors for all Mermaid diagrams, use additional CSS and override the variables defined here:

mkdocs-material/src/assets/stylesheets/main/integrations/_mermaid.scss

Lines 27 to 41 in 5065bf9

	// All definitions
	.mermaid {
	--md-mermaid-font-family: var(--md-text-font-family), sans-serif;
	// Colors
	--md-mermaid-edge-color: var(--md-code-fg-color);
	--md-mermaid-node-bg-color: var(--md-accent-fg-color--transparent);
	--md-mermaid-node-fg-color: var(--md-accent-fg-color);
	--md-mermaid-label-bg-color: var(--md-default-bg-color);
	--md-mermaid-label-fg-color: var(--md-code-fg-color);
	// Mermaid container
	margin: 1em 0;
	line-height: normal;
	}

[squidfunk]

Released as part of 9.0.13.

[ebouchut]

👍 Thank you!