Mermaid diagrams render with too dark background

[jromal]

I had tried in the past to display mermaid diagrams using superfences and usage of mermaid.js.
But they were always "too dark". In some cases the background is black and the font is also black.

Today I have updated to version 8.2.1 and setup mermaid support as explained on the documentation.
They render locally better, but still too dark. With the color of the menu bar.

Maybe is related to the colors of the theme (see below):
[data-md-color-primary="colorlight"] {
--md-primary-fg-color: #7030A0; /* rgb(112,48,160) */
--md-accent-fg-color--transparent: #7030A0;
--md-primary-fg-color--light: #ab73d5;
--md-primary-fg-color--dark: #532478;

But on the materials for mkdocs documentation page, it is a much lighter color.

Does someone know what is the color that the background of the diagrams uses?

But the main problem is that when rendered on a Azure Static Web App where it is published, the background is fully black.
On both the colors (light and dark). On the dark one, the text is white and are more or less readable, but on the light one is black on black.

Has someone an idea what could be the problem. I had it too. But I thought it would disappear once the functionality would be released.

Many thanks.

[jromal]

Update. Locally it works (very will for light theme, keeping black font in grey areas of subgraphs.
I just changed the colors from RGB (ex. #7030A0 ) to HSLA (ex. hsla(274, 54%, 41%, 1)) and this seems to help.

Still on the web (Azure SWA) it is rendered fully black. But if I download the site generated by the pipeline before publishing it to the web,
it renders correctly in my computer.

Does someone an idea if it could be related to the theme colors used?
Or it is due to to Azure blocking something?
Or a browser topic? Proxy?
Or anything else where I could check?

Many thanks.

[squidfunk]

Does it render well when you remove your customizations? It's probably related to how you define the variables.

[jromal]

I found the colors used for the rendering diagrams. Not a big surprise.
--md-accent-fg-color --> for the border
--md-accent-fg-color--transparent --> for the background

I can change the colors and control de behaviour of light and dark modes. They look on the local server as I want in line with the rest of colors.

But on the moment that I upload the rendered webpage to the Azure SWA the mermaid diagrams are fully black (background and border). The new colors, work on the links and hovering a side menu entry. Therefore they work. The colors are correctly updated. Just the Mermaid diagrams are black.

I am really going into the direction of being a problem of SWA. But I cannot imagine how can it interfere. Unless it is a kind of "block" or "proxy" or "interference" (or whatsoever) with the mermaid.js function.

Is there a way to have the mermaid.js locally with this integrated solution?

Thanks to all (if you until read here) and specially Martin for the great product and the time he dedicates to all questions.

[squidfunk]

Mermaid.js works locally without any further ado - the only thing you have to add is the configuration in mkdocs.yml. I suspect that this is somehow a browser caching issue or Azure solving stale assets. Try deploying it to GitHub Pages and see if the issue persists. If you can create a minimal reproducible example that reproduces on GitHub Pages, I'm happy to look into it.

[jromal]

Thanks Martin.

I tried locally and the problem is the same.

Finally I have found the problem. I found this error below on the page rendered on Azure SWA.

mermaidAPI.js:343 
        
       Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-CYb8Vm/DptihugMA4nZPfptyXKMLxMKZ18+sxTvbN9s='), or a nonce ('nonce-...') is required to enable inline execution.

This means I have to change something on the "content security policy" on the json settings file. I had this:
"content-security-policy": "object-src 'self' data; style-src 'self'"

I have added 'unsafe-inline' to the style-src to have:
"content-security-policy": "object-src 'self' data; style-src 'self' 'unsafe-inline'"

And it works.

But because it was not clear to me if it was too risky to use 'unsafe-inline', even if only for "style-src" I have also tried the option of the hash. But did not managed to make it work. I still do not understand why the local file was not working. But ok. The site is only accessible for users that authenticate on the AAD of the company. I think this reduces the risk.

I would be interested what is the setup of others regarding the content security policy when using mermaid to understand if I am doing something wrong.

Many thanks.

[squidfunk]

Mermaid.js itself uses inline styles. That's not something Material for MkDocs imposes, but is a deliberate design decision by Mermaid.js. We change those inline styles to adhere to the values set via mkdocs.yml, but inline styles are there anyway.