Mermaid: Low contrast of arrow heads in sequence diagram (dark theme)

Hi,

The arrow heads of my Mermaid sequence diagrams are barely recognizable (see below). Is there any way to increase the contrast so they are more visible on dark backgrounds?

I am using Obsidian 1.4.16 on MacOS 14.2 and am using the standard dark theme without any custom modifications / CSS.

Example

sequenceDiagram
	actor U as User
	participant S as Service
	U->>S: Hi

Will create the following result:
image

Things I have tried

I have searched the forum and found some css snippets which are supposed to solve the problem. For instance: Mermaid Dark/Light Theme CSS snippet - adding contrast, providing template

However, they don’t seem to have any effect.

I think you should move this to bug because arrowhead is not a selectable object using inspection. So there is no way in using CSS to make change to the arrowhead’s color.

I just ran into this issue too.

@WhiteNoise This is a similar theming issue with mermaid diagrams that I pointed out in Mermaid gitGraph colors are hard to see

This time it’s the signalColor that’s hardcoded to #333 instead of using the theme variables.
This can be shown by opening the dev console and running this then re-rendering the diagram

mermaid.mermaidAPI.updateSiteConfig({
  themeVariables: {
    signalColor: "var(--text-normal)"
  }
})

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.