Mermaid: Custom theme not working

Bug reports
, ,
1

Steps to reproduce

Add the following legal mermaid graph in a code block:

%%{init: {'theme': 'forest'} }%%
graph LR
A[Foo] --> B[Bar]
B --> C[Baz]
C --> B

Expected result

A graph with three boxes with a green:ish theme

Actual result

Error message:

Error parsing Mermaid diagram!  

Unsupported color format: "var(--background-primary)"

If one removed the initial init then the mermaid graph works as expected using the default theme (which doesn’t play well with a dark background).

Environment

MacOS 12.6
MacBook Pro 16
Apple M1 Pro

SYSTEM INFO:
Obsidian version: v1.0.0
Installer version: v1.0.0
Operating system: Darwin Kernel Version 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000 21.6.0
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: light
Community theme: none
Snippets enabled: 0
Restricted mode: off
Plugins installed: 0
Plugins enabled: 0

RECOMMENDATIONS:
none

Additional information

None

1 Like
2

thanks

3

long story short, we don’t support mermaid themes.

They are incompatible with the way Obsidian’s theme is injected.

1 Like
4

Then what should we do? there is a problem when u use mermaid and you have obsidian with a dark theme, is there a way to solve that? or an alternative to mermaid?

1 Like
5

is it possible that Obsidian will eventually support mermaid theme?

i found obsidian has really bad compatibility with mermaid especially in dark mode