Mermaid Theme needs to mirror Obsidian Theme (redux)

[apowers313]

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

Mermaid Theme needs to mirror Obsidian Theme

Steps to reproduce 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 appli…

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?

[apowers313]

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.

[Quinn_McHugh]

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

[WhiteNoise]

As I said in the other thread, we do not support mermaid theme directive.

The bugs you are reporting have separate threads on the forum already:

Mermaid ER diagram uses certain light mode elements in the default dark theme

Steps to reproduce Create a Mermaid ER diagram using this code block: ```mermaid erDiagram Parent { uuid id text title } Child { uuid id text title } Parent ||--|o Child : has ``` Did you follow the troubleshooting guide? Yes Expected result In the dark theme, all text should be easily readable. Actual result It looks fine in the default light theme, but in the default dark theme certain elements - such as the background colour of table cells - seem to use the …

Mermaid: arrow not visible in sequence diagram

Seeing a similar issue in sequence diagrams: [image] Here’s a CSS snippet that resolved the issue for me: /* Fixes the arrowhead color in the element referenced by Mermaid sequence diagrams' marker-end attribute. (The default is #333, which doesn't show up on dark backgrounds.) */ .mermaid [id$="arrowhead"] path { fill: var(--text-muted) !important; stroke: var(--text-muted) !important; }