Mermaid.js diagram colors are now broken since update 1.8.3

I’ve mentioned it on discord here, and was told to create a bug report: Discord

Basically, before the update, the colors displayed on a mermaid diagram, were unaffected by whether the vault is in Light or Dark mode.

However, now, if you switch to Dark Mode, the colors are corrupted, which makes it look bad. The problem persist in the Sandbox version.

(In the picture below, the node called “Public Blockchain” or “Hybrid Blockchain” etc, is an internal link. The node called “Distributed Ledger” or “Cryptography” is not a link)


here is the code for what you see in the picture:

[!info]

Topic Progression Levels

Click on the Hashtags to reveal the corresponding concepts:

#:green_circle:Basic #:yellow_circle:Intermediate #:red_circle:Advanced #:purple_circle:Highly_Advanced #:white_circle:Optional

graph LR
classDef whiteborder stroke:#ffffff,stroke-width:1px;
classDef greenborder stroke:#00ff5d,stroke-width:1px;
classDef yellowborder stroke:#ffe200,stroke-width:1px;
classDef redborder stroke:#ff0063,stroke-width:1px;
classDef purpleborder stroke:#af00ff,stroke-width:1px;
classDef greyborder stroke:#a7a7a7,stroke-width:2px,stroke-dasharray: 10 10;


Optional["⚪Optional"]
Basic["🟢Basic"]
Intermediate["🟡Intermediate"]
Advanced["🔴Advanced"]
Highly_Advanced["🟣Highly_Advanced"]

  Basic --- Intermediate --- Advanced --- Highly_Advanced --- Optional --- Upcoming["Upcoming Concepts"]


class Optional whiteborder;
class Basic greenborder;
class Intermediate yellowborder; 
class Advanced redborder; 
class Highly_Advanced purpleborder; 
class Upcoming greyborder

class Basic link;

Blockchain Introduction

#Blockchain

graph LR
classDef whiteborder stroke:#ffffff,stroke-width:1px;
classDef greenborder stroke:#00ff5d,stroke-width:1px;
classDef yellowborder stroke:#ffe200,stroke-width:1px;
classDef redborder stroke:#ff0063,stroke-width:1px;
classDef purpleborder stroke:#af00ff,stroke-width:1px;
classDef greyborder stroke:#a7a7a7,stroke-width:2px,stroke-dasharray: 10 10;


Blockchain{"Blockchain"}
Consensus_Mechanism["Consensus Mechanism"]
Cryptography["Cryptography"]
Distributed_Ledger["Distributed Ledger"]
Public_Blockchain["Public Blockchain"]
Hybrid_Blockchain["Hybrid Blockchain"]
Federated_Blockchain["Federated Blockchain"]
Private_Blockchain["Private Blockchain"]
Consortium_Blockchain["Consortium Blockchain"]

Distributed_Ledger --> Blockchain
Cryptography --> Blockchain
Consensus_Mechanism --> Blockchain

Blockchain --> Public_Blockchain
Blockchain --> Hybrid_Blockchain
Blockchain --> Federated_Blockchain
Blockchain --> Private_Blockchain
Blockchain --> Consortium_Blockchain

%% Subgraph for Types of Blockchain
subgraph Types of Blockchain
Public_Blockchain
Hybrid_Blockchain
Federated_Blockchain
Private_Blockchain
Consortium_Blockchain
end


class Private_Blockchain,Hybrid_Blockchain,Federated_Blockchain,Consortium_Blockchain whiteborder;
class Blockchain,Public_Blockchain greenborder;
class Layer_1&2 yellowborder; 


class Blockchain,Public_Blockchain,Private_Blockchain,Hybrid_Blockchain,Federated_Blockchain,Consortium_Blockchain,Layer_1&2 internal-link;

1 Like

Can you include the mermaid code you use in a codeblock to make repro a bit faster for us? :slight_smile:

1 Like

Yes. I edited the initial post to include it. Thanks

Hey unfortunately you will have to experiment with the color (hue) a bit for it to look good on both light and dark modes. Internally we had to ditch the old way of custom-patching each mermaid color as it was completely un-maintainable. There was always some colors that were broken, and anytime Mermaid updates half the colors break again and we have to find new ways to patch them. Plus a lot of mermaid colors are slight variations of other colors that can’t be mapped to Obsidian colors well.

In this update we’ve completely removed the one-by-one color patching of mermaid and instead we are relying on a popular method of adapting mermaid diagrams to dark theme by using a CSS color inversion and a hue-rotate to maintain original hue of the color. Sadly this means anything that was light will become dark and anything that was dark will become light, so your whites will become dark.

For the white one, if you switch to something mid-grey it would stay mid-grey between t he two modes. I am not too sure about the yellow, but if you make it slightly darker in the light theme it will become brighter in the dark theme.

1 Like

Mmmmh I guess there is nothing we can do about it then aside from what you said, but I know the limitations of hue tweaking.

I had the same issue with excalidraw.

Thanks for the answer.

1 Like

In my opinion, if you specify an RGB color explicitly, that’s the color you want, regardless of the theme. Is this incorrect thinking? This worked before, but now everything is inverted when in dark mode.

```mermaid
graph LR;
A(["`*Italic* **Bold**`"])

style A fill:#333333, stroke:#FFF000, stroke-width:4px;
```

Light
Dark

Correct, because from a color filter there’s no way to distinguish whether you want that color exactly or whether it was somehow blended with the dark/light colors. Here’s how it’s done:

.theme-dark .mermaid > svg {
	filter: invert(100%) hue-rotate(180deg) saturate(1.25);
}

You can tweak this directly in the app using devtools. Feel free to let me know if you find a better way.

1 Like

Yeah this is the same method by Excalidraw so unfortunately it’ll be running into the same limitations. If Mermaid decides to rewrite its theming engine to something more reasonable to take into account theme color changes without requiring a full re-render, then I will definitely revisit this to see if we can better adapt it to Obsidian’s theme. Currently the theme capabilities of Mermaid relies on boot-time hardcoded colors and hard-set colors generated from those hardcoded colors, so once you render a diagram its colors are set. Changing app theme will cause the opposite colored mermaid diagrams to remain and bleed your eyes until those notes are closed and reopened, and there’s no simple way to detect and fix these because various optimizations in the app causes elements to be removed from the DOM for performance.

My understanding is that CSS values are inherited in a specific order. Shouldn’t the last specified value take precidence over base theme values? If I specify a style directly in the block, doesn’t that take precidence?

CSS filters are post processing effects. They apply to the parent/root element and it performs a transformation of the pixels that is rendered after the regular CSS rules of the inside elements are applied.

1 Like

Thanks! Your two posts were very helpful, and I was able to add the following to a CSS snippet to get back to my original style.

.theme-dark .mermaid > svg {
    filter: invert(0%) hue-rotate(0deg) saturate(1);
}
1 Like

Well you could have just set filter to none in that case. Or at least remove invert and hue-rotate.

1 Like

I learn more and more every day! Thanks :smile:

.theme-dark .mermaid > svg {
    filter: none;
}
2 Likes

goods