search

johanneswuerbach / backstage-plugin-techdocs-addon-mermaid

Backstage TechDocs Mermaid Addon
MIT License
43 stars 18 forks source link

MermaidJS Theme Issues #10

Closed stvnksslr closed 1 year ago

stvnksslr commented 1 year ago

Just wanted to thank you for the work you have put into this plugin already its a huge step up from what was previously available, One issue I am struggling with is the backstage dark or light theme clashing with complex existing mermaidjs diagrams.

The goal of this issue is to propose two idea's and then try and implement it

  1. mermaid-tdocs-addon is theme aware and switches the mermaid js theme between default and dark based on the users current theme.

  2. override the theme to always render a white background behind the current document.

I have some rough proof of concept code for either approach but was curious if you had a preference before i made a PR.

johanneswuerbach commented 1 year ago

Thank you for the kind words :-) I know @dmckernanacv was also investigating theming. Which solution did you ended up using?

dmckernanacv commented 1 year ago

This plugin should be fully theme-able at this point with all the same config that mermaid offers out of the box. I'm unsure about custom theme files (as I'm not that knowledgable about mermaid itself to be honest) but you can provided a full custom theme to the Mermaid Techdocs plugin via the config property.

This property is expected to be an object containing any of the keys in

https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js

Of interest in that object is themeVariables which lets you change a variety of colors per graph type.

These could technically be filled out dynamically since they're just objects.