Allow different mermaid theme on dark mode

[BernatBC]

Issue

• Fixes Set mermaid dark theme automatically #1042

Description

Before this PR, one could define a theme for mermaid. However, the defined theme was set for both light and dark theme.

This PR adds support for defining a custom theme for both light and dark site themes. There are 2 ways to define them:

1. Globally (config.yaml/hugo.yaml):

    # Enable this to create flowcharts using shortcodes.
    flowchart:
      enable: true
      services:
        mermaid:
          theme: default  # Can be: default, dark, forest, neutral
          darkTheme: dark

3. Per diagram:

{{< mermaid align="center" >}}
%%{init: {'theme':'forest', 'darktheme':'forest'}}%%
[diagram]
{{< /mermaid >}}

Test Evidence

When defining a diagram using the forest theme for both light and dark theme (first diagram), and a diagram using the default theme (second diagram):

{{< mermaid align="center" >}}
%%{init: {'theme':'forest', 'darktheme':'forest'}}%%
graph LR;
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
{{< /mermaid >}}

{{< mermaid align="center" >}}
graph LR;
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
{{< /mermaid >}}

Site on light theme:

Site on dark theme:

[netlify]

✅ Deploy Preview for toha-ci ready!

Name	Link
🔨 Latest commit	4ae3d00
🔍 Latest deploy log	https://app.netlify.com/sites/toha-ci/deploys/67e41bb3f368bf0008550101
😎 Deploy Preview	https://deploy-preview-1043--toha-ci.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[hossainemruz]

Thank @BernatBC ! Look like mermaid is broken in the deployment preview. Can you please fix it?