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

Help
,
1

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.

2

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.

3

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)"
  }
})