Mermaid.js (Timeline) diagram renders inaccurate colours

Help
,
1

Problem

I’m trying to change the theme of Mermaid.js diagrams & I’m struggling to get accurate colors. The diagrams seem to be inverting their colours. See the Render Below.

Debug Attempts & Speculation

I’ve been referring to the Mermaid.js theme rules to define discrete colours.
I understand that ‘darkMode’ rules typically just invert & hue-shift, or something along those lines that causes colours to not turn out as intended.

I am using an alternate vault with no CSS snippets or themes.
I do have LaTeX Suite, Unicode Search & Default Template installed however I believe they are irrelevant.

Source for my Mermaid

```mermaid

---
config:
  theme: 'base'
  themeVariables:
    primaryColor: '#f00'
    primaryTextColor: '#0f0'
    primaryBorderColor: '#00f'
    lineColor: '#ff0'
    secondaryColor: '#0ff'
    tertiaryColor: '#f0f'
    darkMode: 'false'
---


timeline
		title Facemask
		Breathing In : Dust caught in PP Filter
		: Humidity is repelled by outer layer
		: Aerosols are attracted by static electricity
		Breathing Out : Mask
```

Render on Default Obsidian with Dark / Light Mode

ColourBuggedMermaidComparison
ColourBuggedMermaidComparison636×715 20.7 KB

Ideal Solution

What I define as “fixed” is if I, as the user, am able to render Timeline Mermaid.js diagrams with colour accuracy. I shouldn’t have to define darkMode as true/false, as switching the themes should render that in Live & Reading views.

Further ‘Wants’

I would like to have more accessible options to change themes of Mermaid diagrams. I tag this as Help because I don’t know if there’s a simpler way to call a custom base theme that I can haved saved in snippets.

I’m unsure if I can change the category after pressing Create Topic, but this belongs in Feature requests or Bug reports … Help! I don’t get programmer etiquette!

Thankyou! - skelobones,carrd,co

2

The automatic dark/light adjustment is currently a design decision and it’s unlikely to change.
However, feel free to open a FR about removing it.

3

Personally as a dark theme user I’ve been wrestling with this for quite some time. The only way to get accurate colors (as in those I typed in) in my mermaid diagram is to use a light theme. When it’s a dark theme something funky happens to all the colors, so you don’t ever get what you submit. I realize it’s done through some css filter.

Hence why I just made a snippet with

.theme-dark .mermaid > svg {

 filter: none; 

}

Now I just gotta remember to include in all my mermaid diagrams so they look alright:

%%{init: {‘theme: ‘dark}}%%

That being said I’d much rather not having to do this and would prefer to have a more robust solution to the theming / color conversion problem than just a blanket filter across all elements of a mermaid diagram.