Custom initialization based on media preferences

[kratsg]

It would be great if this mermaidJS plugin could support allowing for a custom initialize block with mkdocs - as mkdocs-material (for example) supports a "preferences" which allows one to automatically switch between light/dark theme. A similar effect can be done with something like

mermaid.initialize({
    theme: (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light'
 });

but how does one override the injection of this JS and provide your own?

[github-actions]

Thank you for your contribution! This is very appreciated.

[kratsg]

Actually, I think I figured it out (it would be great to add this to documentation!). It's brilliant to have the ^ literal implementation as that allows one to inject arbitrary JS code nicely. As such, the following worked:

plugins:
  - search
  - mermaid2:
      arguments:
          theme: |
            ^(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light'

and it allows the theming of the mermaidJS diagrams to switch automatically :)

[fralau]

This is great !

I agree it would be great to add this to the documentation. Would you like to make a PR, to insert this in the README.md, under "Tips and Tricks"?