Mermaid Theme needs to mirror Obsidian Theme (redux)

Hey, forum newbie here – I’m not sure what the right process is for reviving a bug from the graveyard.

I found this post that exactly describes the problem I’m having (i.e. in dark mode, Mermaid sequence diagrams are hard to read because they are picking up the wrong theme):

Even if this didn’t get fixed, did anyone find a good workaround that doesn’t involve manually adding ugly metadata to every diagram? Is there any way to globally set Mermaid to use the light theme?

Using Obsidian on iPad (v1.4.16 (114)), the Mermaid directives don’t seem to work. Trying the new Mermaid frontmatter config the diagram picks up the title (e.g. Hello Title from the documentation) but doesn’t change the formatting of the Mermaid diagram. Not sure if that’s because Obsidian is over-riding the CSS for Mermaid.

It would be really nice if there were a siteConfig for Mermaid (as mentioned in the Mermaid documentation), which would enable a work around for this bug.

I’m not sure that there’s a workaround for this formatting bug.

Hi @apowers313,

This bug is also an issue for me. I am using the default Obsidian theme (dark mode).

I tried using the Mermaid Themes plugin to globally set the theme of my Mermaid diagrams to dark, but was unsuccessful.

As mentioned in the original thread, adding %%{init: {'theme': 'dark' } }%% to the top of the desired Mermaid diagram prevents readability issues while using the Obsidian in dark mode:

```mermaid
%%{init: {'theme': 'dark' } }%%
erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        string name
        string custNumber
        string sector
    }
    ORDER ||--|{ LINE-ITEM : contains
    ORDER {
        int orderNumber
        string deliveryAddress
    }
    LINE-ITEM {
        string productCode
        int quantity
        float pricePerUnit
    }```

Same as you - I haven’t found a solution that addresses this globally.

Without Mermaid Dark Theme

With Mermaid Dark Theme