[Feature Request] Dynamically change mermaid theme based on selected appearance mode

[peter-csala]

Is your feature request related to a problem?

Mermaid.js supports different built-in themes. Some are tailored for lighter background (like forest or neutral) while others are better suited for darker (like dark). On the mermaid.js documentation if you switch from light appearance mode to dark then a different theme is applied for the diagrams.

We would like to ask a similar solution from docfx.

Describe the solution you'd like

The optimal solution would be that the mermaid diagrams' theme are changing between default and dark automatically (if the diagram does not overwrite the site-wide settings). In other words, if you don't explicitly set the theme then it is appearance mode aware otherwise it is fixed to the chosen theme.

Describe alternatives you've considered

If we could do it by our own inside a preprocessor in somewhat similar way like mermaid docs did that would also great.

const renderChart = async () => {
  const hasDarkClass = document.documentElement.classList.contains('dark');
  const mermaidConfig = {
     ...   
    theme: hasDarkClass ? 'dark' : 'default',
  };
  ...
}

Additional context

We would like to add more and more mermaid diagrams to the pollydocs.org. We have temporarily chosen the dark theme because it is readable with dark appearance mode but it is not as legible with light mode.

We have tried to use the default theme for both appearance modes but in dark mode the diagram is terrible.