How to modify Mermaid CSS

[Vasperous]

Apologies but what is probably a basic question but I am having a hard time getting my custom CSS for the Mermaid.js support to take.
Here is what I have done:

1. Added custom css files

extra_css:
  - stylesheets/admonitions.css
  - stylesheets/extra.css
  - stylesheets/icons.css
  - stylesheets/mermaid.css

2. Based on the Mermaid CSS I added the classes etc. to my own mermaid.css
3. Changes are not taking affect

Looking at the inspector I even tried adding things like:

#__mermaid_0 .note {
    stroke: #0c1e58 !important;
    fill: #0c1e58 !important;
}

Even with that I was unsuccessful. Any advice would be greatly appreciated.

[squidfunk]

Thanks for asking. Unfortunately, you cannot override Mermaid's CSS with additional CSS, because Mermaid.js diagrams must be encapsulated in shadow DOMs due to duplicate identifiers which lead to undefined behavior. If you wish to add or change some of the CSS Material for MkDocs applies to Mermaid.js, you would need to make your changes here and rebuild the theme.

I recommend reading #2170 and mermaid-js/mermaid#1318 to understand the current design limitations.

[Vasperous]

Thank you! So it might be a better solution (if required) to generate the Mermaid chart outside of mkdocs as a SVG with the custom CSS and then import that image?

[squidfunk]

Might be a viable solution, yes, depending on what you're trying to achieve.

[RokeJulianLockhart]

#4582 (comment)

@Vasperous, that works for me - it adheres to my CSS. Thanks.

[C3pa]

Depending on your needs, Mermaid's built-in styling features may be enough for your use case since they support changing stroke and fill colors. This is what I am referring to in the official docs, please scroll down to the "Styling links" section.

I have a working example of that:

"mermaid
graph LR
A(NiObject) --> B(NiAccumulator);
B --> C(NiClusterAccumulator);
C --> D(NiAlphaAccumulator);
A --> E(NiExtraData);
E --> F(BrickNiExtraData);
E --> G(TES3ObjectExtraData);
E --> H(NiStringExtraData);
E --> I(NiTextKeyExtraData);
E --> J(NiVertWeightsExtraData);
A --> K(NiObjectNET);
K --> L(NiDynamicEffect);
L --> M(NiLight);
M --> N(NiPointLight);
N --> O(NiSpotLight);
classDef notExposed fill:#ADFF2F,stroke:#333,stroke-width:2px;
class B,C,D notExposed;
classDef notResearched fill:#40E0D0,stroke:#333,stroke-width:2px;
class F,J notResearched;
"

And the result on the page (using Material for Mkdocs), scroll all the way down.

[Vasperous]

Thank you ! I will give this a try!

[Vasperous]

Looks like that feature is specific to graphs and hasn't been extended to Sequence Diagrams :(

[C3pa]

Maybe you could try changing the color of your diagram using directives? Here is a link to the official documentation. In essence, you can insert a directive block just before your diagram:

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#BB2528',
      'primaryTextColor': '#fff',
      'primaryBorderColor': '#7C0000',
      'lineColor': '#F8B229',
      'secondaryColor': '#006100',
      'tertiaryColor': '#fff'
    }
  }
}%%
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end

[ronanhansel]

For those who stubbled upon this problem, here's my approach.

// Helper function to safely get CSS variables
const getCSSVariable = (variable: string, fallback: string): string => {
  if (typeof window !== 'undefined' && typeof document !== 'undefined') {
    return getComputedStyle(document.documentElement).getPropertyValue(variable).trim() || fallback;
  }
  return fallback;
};

And initialise using

mermaid.initialize({
  startOnLoad: false,
  securityLevel: 'loose', // Allow clicks in the rendered diagram
  logLevel: 'error', // Only show errors, not warnings
  theme: 'forest', // Set the theme to forest
  themeVariables: {
    primaryColor: getCSSVariable('--primary', '#BB2528'),
    primaryTextColor: getCSSVariable('--primary-foreground', '#fff'),
    primaryBorderColor: getCSSVariable('--primary', '#7C0000'),
    lineColor: getCSSVariable('--accent', '#F8B229'),
    secondaryColor: getCSSVariable('--secondary', '#006100'),
    tertiaryColor: getCSSVariable('--background', '#fff'),
    edgeLabelBackground: getCSSVariable('--background', '#fff'),
    edgeLabelColor: getCSSVariable('--foreground', '#000')
  }
});

Essentially I created a helper function to get CSS variable on runtime and replace it on initialisation.