I was looking into how to get a dark-themed Mermaid diagrams and found the post detailing how to do so by changing the CSS. This is great if you want complete control over the theme, but it doesn't work with most types of diagram.
If all you want is a generic dark theme, there's an easier way, using Mermaid's own inbuilt dark theme. I added this to userstyle.css to get rid of the white background:
pre.mermaid {
background-color: #2E3440 !important;
}
And set the Mermaid theme like this:
%%{init: {'theme': 'dark'}}%%
pie
title Pie demographics
"Apple": 33
"Chicken": 60
"Cherry": 7
(For some reason it's not letting me upload a screenshot, sorry...)
There are two problems with this approach:
- You need to add the configuration line to each plot individually, which is a bit tedious - is it possible to change the Mermaid configuration globally?
- As far as I'm aware, there's no way to change the white background on mobile - which means when the diagrams sync, the labels are all but illegible, since the Mermaid configuration is included in the note.
It seems to me that implementing this would be pretty straightforward - you could either default to the dark Mermaid theme whenever a dark Joplin theme is enabled, or there could be a configuration option to choose from Mermaid's selection of themes (at present, there are five). Is this something that would be considered for inclusion in the app? If there's interest, I'd be happy to have a go at implementing it.
