Mermaid: arrow not visible in sequence diagram

Bug graveyard
,
4

I was surprised to see this bug is still happening and found this new thread. I already previously explained and offered the solution in: Mermaid: Low contrast of arrow heads in sequence diagram (dark theme) - #3 by jjspace

This is an issue with how the mermaid theme variables are defined globally
For the arrow heads it’s the signalColor that’s hardcoded to #333 instead of using the theme variables.
The loop outline color follows the same signal color. The loop text is found in loopTextColor
This can be fixed with this snippet in the console then re-rendering the diagram

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

There are other theme variables in the mermaid site config that are still set to default CSS colors like #333 which will not show up on most dark themes. I recommend going through all the theme values again and updating them to be dynamic dependant on Obsidian theme variables (like found in an older similar theming issue with mermaid diagrams Mermaid gitGraph colors are hard to see)

CC @WhiteNoise