Setting default dark theme based on backstage theme variant

[jboeijenga]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch backstage-plugin-techdocs-addon-mermaid@0.11.0 for the project I'm working on.

The issue is that by default the dark theme for the mermaid plugin is not picked up correctly. I think propagating the dark variant to the default mermaid dark theme is the fix.

Here is the diff that solved my problem:

diff --git a/node_modules/backstage-plugin-techdocs-addon-mermaid/dist/index.esm.js b/node_modules/backstage-plugin-techdocs-addon-mermaid/dist/index.esm.js
index 0279350..e5a3a82 100644
--- a/node_modules/backstage-plugin-techdocs-addon-mermaid/dist/index.esm.js
+++ b/node_modules/backstage-plugin-techdocs-addon-mermaid/dist/index.esm.js
@@ -21,7 +21,7 @@ function selectConfig(backstagePalette, properties) {
   if (backstagePalette === "light") {
     return properties.lightConfig || {};
   }
-  return properties.darkConfig || {};
+  return { theme: 'dark', ...properties.darkConfig } || { theme: 'dark' };
 }
 let diagramId = 0;
 const makeDiagram = async (el, diagramText, backstagePalette, properties) => {

This issue body was partially generated by patch-package.

By this way of setting the theme it's still possible to overwrite this default with a consumer defined theme.

If needed I can create a PR for this change.

[johanneswuerbach]

This seems fairly reasonable, happy to review and merge a PR.

Regarding the code, I guess the return could be simplified to return Object.assign({ theme: 'dark' }, properties.darkConfig), which should work with darkConfig being set and without.