Cannot customize theme through cli and json config file

[AlphaJack]

Description

I cannot customize the theme when processing mermaid files through the cli.
I have a common "config.json", but mermaid cli still applies the default values for themeVariables.

Steps to reproduce

1. Create a .json config and .mmd chart file from http://mermaid.js.org/config/theming.html
2. Run mmdc --configFile config.json --input flowchart.mmd --output flowchart.png
3. Observe that the custom theme has not been applied

Screenshots

No response

Code Sample

Config:

{
  "init": {
    "theme": "base",
    "themeVariables": {
      "primaryColor": "#BB2528",
      "primaryTextColor": "#fff",
      "primaryBorderColor": "#7C0000",
      "lineColor": "#F8B229",
      "secondaryColor": "#006100",
      "tertiaryColor": "#fff"
    }
  }
}

Chart:

---
title: Example chart
---

flowchart 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

Setup

• Mermaid version: 10.8.0
• Browser and Version: Puppeteer 10.8.0

Suggested Solutions

No response

Additional Context

I cannot read "base" as a valid field for "theme" in the spec: https://mermaid.js.org/config/schema-docs/config.html#theme, why is that?

Why is themeVariables not specified?

[Yokozuna59]

Hi @AlphaJack, thanks for reporting.

I just would like to inform you that this a repo is for mermaid; there is another repo for mermaid-cli: https://github.com/mermaid-js/mermaid-cli.

So for the issue you are facing, the documentation you are referring to is for:

• How to configure the diagram using frontmatter (the inline configuration in the file itself):

  ```mermaid
  ---
  title: Example Chart
  config:
    theme: base
    themeVariables:
      primaryColor: "#BB2528"
      %% other configurations…
  ---
  flowchart TD
  A
  %% other nodes…
  ```

• How to configure the whole module using the Mermaid API:

  import mermaid from 'mermaid';
  
  mermaid.initialize({
    'theme': 'base',
    // other configurations…
  });

---

In case you want to use the config.json file with the cli, then you should directly write the configuration in config without the need for init or config, so the file should be:

{
  'theme': 'base',
  // other configurations…
}

I cannot read "base" as a valid field for "theme" in the spec: https://mermaid.js.org/config/schema-docs/config.html#theme, why is that?

I’m not really sure; maybe it should be used internally as a base and extended to other themes.

[AlphaJack]

Thank you, it works well without init!