Mdbook Mermaid dark mode support

badboy / mdbook-mermaid

A preprocessor for mdbook to add mermaid support

Mozilla Public License 2.0

306 stars 32 forks source link

Mdbook Mermaid dark mode support #35

Closed hemeroc closed 1 year ago

hemeroc commented 1 year ago

Expectation: When switching to a dark theme in mdbook the mermaid diagrams also switch to a dark theme.

What happens: Mermaid diagrams do not honor the theme and render in light mode being not very readable in dark mode.

I am happy to help if you point me to the right start.

badboy commented 1 year ago

This is more of a styling question and can be done independently of this plugin. Looks like mermaid doesn't have any auto-switching but it does have theming, so you can build the auto-switch yourself.

hemeroc commented 1 year ago

I think mdbook-mermaid would need to implement a switching that at least provides a default mapping from the default mdbook themes to the light or dark mermaid themes.

I would see mdbook-mermaid as a mermaid bridge for mdbook that should integrate mermaid diagrams into mdbook and not produce diagrams that you can't read in one of the default themes. Similar as they do it for mermaid-live as described in this comment: https://github.com/mermaid-js/mermaid/issues/2644#issuecomment-1029648289

I would be absolutely willing to implement this if you could hint me in the right direction.

badboy commented 1 year ago

mdbook-mermaid currently doesn't handle any theming on its own at all. mdbook handles theming by applying a class to the <html> event.

You might need to either:

Write some JS to watch for that change and apply some mermaid theming
Extend the CSS of the theme to apply to mermaid styling as well

Both things can be tried out in your own project by modifying the additional JS or CSS files. If that leads to a more general solution we might be able to bring this back into this plugin.