10000 In a Sequence Diagram the primaryColor config is ignored for participants' background color · Issue #5034 · squidfunk/mkdocs-material · GitHub
[go: up one dir, main page]
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
4 tasks done
ebouchut opened this issue Feb 12, 2023 · 3 comments
Closed
4 tasks done

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

ebouchut opened this issue Feb 12, 2023 · 3 comments
Labels
bug Issue reports a bug resolved Issue is resolved, yet unreleased if open

Comments

@ebouchut
Copy link
Contributor
ebouchut commented Feb 12, 2023 •
edited
Loading

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

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
@ebouchut ebouchut changed the title In a Sequence Diagram the primaryColor config is ignored for participants background color In a Sequence Diagram the primaryColor config is ignored for participants' background color Feb 12, 2023
@squidfunk squidfunk added the needs investigation Issue must be investigated by the maintainers label Feb 12, 2023
@squidfunk
Copy link
Owner
squidfunk commented Feb 18, 2023 •
edited
Loading

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:

Bildschirmfoto 2023-02-18 um 10 40 32

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 squidfunk added bug Issue reports a bug resolved Issue is resolved, yet unreleased if open and removed needs investigation Issue must be investigated by the maintainers labels Feb 18, 2023
@squidfunk
Copy link
Owner

Released as part of 9.0.13.

@ebouchut
Copy link
Contributor Author

👍 Thank you!

@ebouchut ebouchut mentioned this issue Feb 20, 2023
Closed
ebouchut referenced this issue in ebouchut/loopdocs Feb 20, 2023
@ebouchut
💄 Configure Mermaid diagrams stroke color to be in sync with our colo…
efdff93 
…r scheme

Fix LoopKit#588

See https://github.com/squidfunk/mkdocs-material/issues/5034\#issuecomment-1435533798
@ebouchut ebouchut mentioned this issue Feb 20, 2023
Merged
ebouchut added a commit to ebouchut/loopdocs that referenced this issue Feb 21, 2023
@ebouchut
⬆️ Upgrade mkdocs-material dependency to 9.0.13 from 9.0.12
f07e7a9 
See squidfunk/mkdocs-material#5034 (comment)
@squidfunk squidfunk mentioned this issue Mar 9, 2023
Closed
4 tasks
@squidfunk squidfunk mentioned this issue Apr 9, 2024
Closed
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Issue reports a bug resolved Issue is resolved, yet unreleased if open
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ebouchut @squidfunk
0