Mermaid Theme needs to mirror Obsidian Theme

Steps to reproduce

  1. With obsidian in light mode create a sequence diagram or pie chart. Everything will be rendered correctly.
  2. 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.
  3. 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.

1 Like

I am not sure I understand what you mean.
Post a screen recording of this happening in the sandbox vault.

OK I opened a sand box and took a series of screen shots

First obsidian in light mode and a mermaid sequence diagram with no theme setting

Now switch obsidian to dark mode

Next add dark theme to mermaid diagram

Switch back to light mode in obsidian

Finally set mermaid theme to light

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.

The show debug info for the vault:
Sandbox vault

SYSTEM INFO:

  • Obsidian version: v1.3.5
  • Installer version: v1.3.5
  • Operating system: Windows 10 Pro 10.0.22621
  • Login status: logged in
  • Catalyst license: none
  • Insider build toggle: off
  • Live preview: on
  • Legacy editor: off
  • Base theme: light
  • Community theme: none
  • Snippets enabled: 0
  • Restricted mode: on

RECOMMENDATIONS:

  • none

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 suppor it. We don’t support mermaid themes. We run our own theme.

If we ignore the mermaid themes the and I

  1. Close the document
  2. Change the obsidian theme
  3. Reopen the document

I get the same as the first 2 images in my previous post. I can provide screenshots if required.

I am unable to reproduce this problem.

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 ->> ).