With obsidian in light mode create a sequence diagram or pie chart. Everything will be rendered correctly.
Switch obsidian into dark mode. On the sequence diagram some arrow heads are dark and nearly visible, on the pie chart the same is seen with the legend text.
For each diagram add the following to switch the mermaid theme to dark.
%%{init: {‘theme’:‘dark’}}%%
Now the diagram will become fully readable.
Expected result
I would expect the dark mermaid theme to be applied if obsidian is set to the dark theme (or if set to auto and the OS is theme is set to dark)
Actual result
The mermaid diagrams always seem to be rendered in the light theme, no matter what theme obsidian is set to render in.
Environment
SYSTEM INFO:
Operating system: ios 16.5 (Apple iPad)
Obsidian version: 1.4.6 (105)
API version: v1.3.5
Login status: logged in
Catalyst license: none
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: Things v2.1.9
Snippets enabled: 0
Restricted mode: off
Plugins installed: 9
Plugins enabled: 9
1: Advanced Tables v0.18.1
2: Calendar v1.5.10
3: Kanban v1.5.3
4: Rollover Daily Todos v1.1.5
5: Tasks v3.7.0
6: QuickAdd v1.0.2
7: Excalidraw v1.9.1
8: Templater v1.16.0
9: Mermaid Tools v0.2.1
Additional information
Although I have the things theme installed the same issue is seen if I remove it and use the built in theme.
I operate my windows laptop in light mode (it is used mostly during the day) and my iPad in dark mode (used mostly in an evening). It would be nice to see the diagrams clearly on both devices.
I suspect by default the mermaid diagrams are rendered with the mermaid light theme. Synchronising the mermaid theme used as the base theme for rendering diagrams with the obsidian theme would produce better visual appearance out of the box. It should still be possible to override parts of the theme locally if required.
what happens if you just close and reopen the note after switching dark/light?
I am not interested much in what happens when you explicitly write the mermaid theme because we don’t support it. We don’t support mermaid themes. We run our own theme.
I can confirm that I am experiencing the same behaviour. Thank you @katterfelto for the work-around. I agree I would expect the mermaid diagrams rendered with the default dark theme to be readable, but that does not seem to be the case.
I see the same behavior too. However, the workaround didn’t work either for me (MacOS). I used different arrowheads so my sequence diagrams would be readable in dark mode ( using -) instead of ->> ).
