Fix display of mermaid diagrams in dark mode

[timhoffm]

Closes: #2249

The handling is completely analoguous to the existing handling of graphviz here.

sphinxcontrib-mermaid generates the following HTML

Therefore, the selector pre.mermaid > svg is suitable.

[stevepiercy]

Unrelated to this PR, and according to the failed check at https://github.com/pydata/pydata-sphinx-theme/actions/runs/17194519135/job/48774620104?pr=2250, it appears that PyTorch changed the URL of its logo from:

https://docs.pytorch.org/docs/stable/_static/images/logo-dark.svg

to:

https://docs.pytorch.org/docs/stable/_static/img/logo.svg

However its logo might not appear well in light mode. PyTorch's documentation's primary navbar background color remains dark in any mode.

There's also this version in the repo:

https://raw.githubusercontent.com/pytorch/pytorch/refs/heads/main/docs/source/_static/img/pytorch-logo-dark.svg

[drammock]

thanks @timhoffm! I've pushed a few commits to make it work (new SCSS files need to be imported in our root file), make sure the extension is installed for our own doc build, and add a documentation page.

[stevepiercy]

Just a couple of questions.

I've done similar for Plone docs at https://6.docs.plone.org/contributing/documentation/myst-reference.html#diagrams-and-graphs-with-mermaid

For examples, have you tried https://ebp-sphinx-examples.readthedocs.io/en/latest/? I don't know if it works for reStructuredText, as I use it exclusively for MyST.

[stevepiercy]

Do the over/underlines length need to exactly match the length of the title?

[drammock]

no.

[stevepiercy]

Should these values both have a leading .. or none?

[drammock]

first one doesn't need it, but it wouldn't hurt. Second one does need it. I tend to omit .. on the first one so that the text aligns nicely on the two lines.

[drammock]

For examples, have you tried ebp-sphinx-examples.readthedocs.io/en/latest?

Nope. As the prominent warning states, it only works on pages written in .md, not .rst