How to specify a custom color them for mermaid mind maps

[harrelfe]

Description

I am trying to specify custom colors for mermaid mind maps, using what is documented here: https://mermaid.js.org/config/theming.html with various permutations of theme variable names. My last try is below. But no permutation got any color specifications to take effect except for the root node's color. Thanks for any assistance. The provided color themes are too colorful for me (except for neutral with is too bland and dark for me).

---
title: "Test"
format:
  html:
    embed-resources: true
---

````{mermaid}
%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'mindmapRootColor': '#e3f2fd',         /* Light blue for the root node */
      'mindmapTextColor': '#1565c0',           /* Dark blue for all node text */
      'mindmapMainColor': '#bbdefb',           /* Soft pastel blue for main branch nodes */
      'mindmapSecondaryColor': '#90caf9',      /* Muted blue for secondary branch nodes */
      'mindmapLineColor': '#64b5f6'            /* Blue for all connecting lines */
    }
  }
}%%
mindmap
  root((Mindmap2))
    Concept 1
      Detail 1A
      Detail 1B
    Concept 2
      Detail 2A
      Detail 2B

[mcanouil]

Could you properly format your post using code blocks for code and terminal outputs? Thanks.
If your code contains code blocks, you need to enclose it using more backticks, i.e., usually four ````.
See https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us.

self-contained is a 2.5 years old outdated option. To avoid issues, please use embed-resources as documented.

Quarto does not use the latest version of Mermaid.js as the development cycle is quite too fast in Mermaid.js thus what you see in Mermaid.js documentation might not work yet in Quarto.
Instead, have you look at what Quarto documents to customise Mermaid.js diagram? https://quarto.org/docs/authoring/diagrams.html#mermaid-theming

[harrelfe]

I tried fixing the backticks but that didn't work for me. I fixed the embed-resources - thanks. And thanks for the link. I see it's easy to set up in yaml to use a built-in mermaid mindmap color theme. Customizing that with CSS is a bit beyond me at present.

[mcanouil]

What needs more backticks is the enclosing ones, not the ones inside your document.

````qmd
```{r}
```
````