Dark theme support for sphinxcontrib-mermaid plugin

[timhoffm]

What is a good way to add dark theme support for plugins?

sphinxcontrib-mermaid embeds a theme-independent transparent svg. As a result, black lines and black text vanish on the dark background of the dark pydata-sphinx-theme.

What is the best approach to fix this issue? Options:

• is it ok/recommended to add special CSS for that plugin at pydata_sphinx_theme/assets/styles/extensions - a solution similar to https://github.com/pydata/pydata-sphinx-theme/blob/main/src/pydata_sphinx_theme/assets/styles/extensions/_graphviz.scss would work
• or is that something that should be addressed on the side of /sphinxcontrib-mermaid

[drammock]

What would it look like to address it on their side? Would the plug-in generate 2 svgs and add only-dark / only-light classes to them? Those class names will be theme specific and not supported by all themes, so may not degrade gracefully (the svg may display twice in some themes).

My personal opinion is that it's ok to add custom CSS here as you've suggested. But I think it would require some unique and stable class names to be present in the generated svg... Is that possible? It's been a while since I used the plug-in so I don't recall what its defaults are or how configurable it is.

[timhoffm]

What would it look like to address it on their side?

There is some discussion here: mgaitan/sphinxcontrib-mermaid#78 Though I don't understand all the details. It seems that there are different output modes: raw (default), png, svg. I think the raw one embeds html/javascript, and that's the one talked about. One could try to hook into the javascript to pass the information and let the meremaid side do the styling. But it feels quite complicated.

My personal opinion is that it's ok to add custom CSS here as you've suggested. But I think it would require some unique and stable class names to be present in the generated svg

They generate the following:

I believe this CSS should be relatively safe (analogous to what we do for graphviz):

html[data-theme="dark"] pre.mermaid > svg {
  filter: brightness(0.8) invert(0.82) contrast(1.2);
}

[lepture]

@timhoffm cool, thanks for the solution. I've used it in Shibuya theme: https://shibuya.lepture.com/extensions/mermaid/