unable to customise themes for mermaid diagrams inside a markdown

[alexwall]

Using the standalone preview for mermaid works:

Focus the cursor into the diagram on the left. Diagram on the right uses the new theme.

Preview as a part of a markdown preview doesn't use the customised theme (on the left). [cmd]+[shift]+[V]

The customisation is not working for markdown embedded previews.

[ristomatti]

At least nowadays it seems to work fine with either the init directive or within settings.json.

Curiously in settings.json you'll need to use a nested structure (exactly as documented in the README), which VSCode does not recognize as known settings.

::: mermaid
%%{init: {
  "theme": "dark",
  "themeCSS": ".cardinality text { fill: #ededed }",
  "themeVariables": {
    "primaryTextColor": "#ededed",
    "nodeBorder": "#393939",
    "mainBkg": "#292929",
    "lineColor": "orange"
  }
}}%%
graph TD;
A[Christmas] --> |Get Money| B(Go Shopping)
B --> C{Let me think}
C --> |One| D[Laptop]
C --> |Two| E[iPhone]
C --> |Three| F((Car))
F --> |back| B
Comment> This is comment]
Comment --- C
:::

[vstirbu]

@ristomatti would it be correct to say that your previous comment can be translated into something like the ability to define the init structure as part of the configuration, and if the value is provided the plugin to append it to the diagram in the preview panel:

You type this

::: mermaid
graph TD;
A[Christmas] --> |Get Money| B(Go Shopping)
B --> C{Let me think}
C --> |One| D[Laptop]
C --> |Two| E[iPhone]
C --> |Three| F((Car))
F --> |back| B
Comment> This is comment]
Comment --- C
:::

and you render this

::: mermaid
%%the value from configuration if provided%%
graph TD;
A[Christmas] --> |Get Money| B(Go Shopping)
B --> C{Let me think}
C --> |One| D[Laptop]
C --> |Two| E[iPhone]
C --> |Three| F((Car))
F --> |back| B
Comment> This is comment]
Comment --- C
:::

[ristomatti]

That would be helpful and make sense. My comment however was mostly about the unexpected way to set themeCSS in the settings. I don't have the plugin installed anymore so it might have already been fixed but I vaguely remember VSCode showing the syntax that worked as unrecognized settings properties. It's anyway unrelated to this issue.