Directives doesn't override Mermaid Props for themes

[knowacki23]

Hi, while trying out new version of plugin (0.6.2) and messing around with directives I've noticed that when I setup Mermaid Props for dark mode the directives will work only for light mode, they will not override default configuration that I have set for the dark mode.

Is it possible to fix it? Thank you! :)

Issue

Directives doesn't work when Mermaid Props are set to change the theme appearance.

Steps to reproduce

Define Props for one of the modes: ` // packages/app/src/App.tsx // packages/app/src/components/catalog/EntityPage.tsx import { Mermaid } from 'backstage-plugin-techdocs-addon-mermaid';

// ... {techDocsPage}

{/*...*/} ` Define graph with directives: `%%{init: { 'theme': 'base', 'themeVariables': { 'primaryColor': '#BB2528', 'primaryTextColor': '#fff', 'primaryBorderColor': '#7C0000', 'lineColor': '#F8B229', 'secondaryColor': '#006100', 'tertiaryColor': '#fff' } } }%% graph 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` ### Expected behavior Directives overrides the theme settings.

[johanneswuerbach]

I'm not sure I fully understand the issue.

You are configuring the default primary color to be #4b7519 (in dark mode) and are overwriting this for a specific diagram to be #BB2528.

Instead of seeing #BB2528 (in both modes), you are seeing #4b7519 in dark mode and #BB2528 in light mode?

Is this correct so far?

[knowacki23]

I have default primary color set to #4b7519 for the dark mode and I would like to be able to override that settings when a Directive is used for a diagram.

So if user uses directives they will override the default settings.

Instead of seeing #BB2528 (in both modes), you are seeing #4b7519 in dark mode and #BB2528 in light mode?

Exactly, and I would like to override #4b7519 in dark mode as well.

I hope that helps you.