I'm using Mermaid diagrams as part of markdown files on GitHub. A side-effect of this is that I don't have access to javascript, which I could otherwise use to solve the problem.
The MermaidJS theme system allows you to specify a custom theme inline in the diagram definition, like this:
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#93D0FF',
'primaryTextColor': '#000'
}
}
}%%
flowchart TD;
queue[Queue] -- Query for Items --> db[(Database)]
db --> queue
queue -- Found Item --> process[Process Item]
This works great, except that the colors are hardcoded, and I've found that when using a browser in Dark Mode, the diagram is set against a dark background and some parts become unreadable.
Mermaid has "dark mode support" and if I don't specify any custom theme at all, then it auto-selects a dark mode compatible theme when the browser is in dark mode. However, the default "light mode" mermaid theme is ugly so that's not a great solution.
What I'd like to do is something like this
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#93D0FF',
'primaryTextColor': (darkMode ? '#fff' : '#000')
}
}
}%%
flowchart...
However the docs don't mention anything about dynamic calculation inside themeVariables and my above attempt with the ternary operator doesn't work.
Is it possible to compute values, or otherwise alter an inline theme so it works in both light and dark mode, in environments like GitHub where JavaScript is not available?
Note: The mermaidjs theme docs say there is a variable called background. I tried setting it to force the background color to white (attempting to "opt out" of dark mode), but this didn't work either.
