Mermaid set the background color on the SVG element (dark mode)

[brunocek]

Hello.

Thank you for the wonderful tool! An enhancement request.

As a user of mermaid diagrams, I have been trying to make init theme dark work, but the only way I found is editing the generated svg and adding style="background-color:black" to the initial svg tag. Otherwise I get a diagram that opens on a completely white background on firefox and safari.

Can we please have a way to pass a parameter to have the svg tag with the above mentioned style, please?

Thank you in advance. Kind regards,

Bruno

[ggrossetie]

With https://github.com/yuzutech/kroki/issues/827 it should now be possible to pass a parameter to set the theme: http://mermaid-js.github.io/mermaid/#/Setup?id=theme

[brunocek]

Sorry, still unsure how to apply the CSS on the svg tag. The attempt bellow does not work, background is still all white.

%%{init: {'theme': 'dark', 'themeCSS': '.svg {background-color: black}'}}%%

---

I see the structure of the generated svg, and it appears to me the style cant be applied to svg tag scope. It goes like:

<svg ... ><style ... ></style> <g/><g><path... /> <g><line .. /> .... </svg>

[ggrossetie]

I don't understand what you are trying to achieve. The SVG has no background color defined (i.e., transparent) so if your page has a black background, it will look like this:

I thought you were looking for a way to pass the Mermaid theme as a diagram option: https://docs.kroki.io/kroki/setup/diagram-options/

[brunocek]

Dark theme on firefox, osx and safari do NOT change the background colour for about:blank or svg.

The best fix for this would be mermaid generating png rather than svg.

Depending on the user's workflow, the generated file will be displayed in the browser or png viewer.

You gave me an idea and for now I will insert the svg in a html, but this is one extra file and etc...

[ggrossetie]

You should open an issue at https://github.com/mermaid-js/mermaid as it should be fixed upstream. For instance, Mermaid could support the following definition to set the background on the root element:

%%{init: {'theme': 'dark', 'themeCSS': 'svg {background-color: black}'}}%%

Alternatively or in addition, Mermaid could define:

  <defs>
    <style>
      svg {
        background-color: white;
        color-scheme:light dark;
      }
      @media (prefers-color-scheme:dark) {
        svg {
          background-color: black;
        }
      }
    </style>
  </defs>

[brunocek]

Thank you! I have added now my voice to an existing issue upstream: https://github.com/mermaid-js/mermaid/issues/1553

As I wrote there, mermaid already supports the generation of png. Can we please change this issue to "mermaid png endpoint", as this feature would attend my use case in an even better way.

[ggrossetie]

Can we please change this issue to "mermaid png endpoint", as this feature would attend my use case in an even better way.

It was contributed by @derlin in https://github.com/yuzutech/kroki/pull/951, and it will be part of the next release.