Mermaid ER diagram uses certain light mode elements in the default dark theme

[faheel]

Steps to reproduce

Create a Mermaid ER diagram using this code block:

```mermaid
erDiagram
    Parent {
	    uuid id
	    text title
    }
	Child {
		uuid id
		text title
    }
    Parent ||--|o Child : has
```

Did you follow the troubleshooting guide?

Yes

Expected result

In the dark theme, all text should be easily readable.

Actual result

It looks fine in the default light theme, but in the default dark theme certain elements - such as the background colour of table cells - seem to use the light theme colors.

Environment

SYSTEM INFO:
	Obsidian version: v1.4.13
	Installer version: v1.4.13
	Operating system: Darwin Kernel Version 22.6.0: Wed Jul  5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64 22.6.0
	Login status: not logged in
	Insider build toggle: off
	Live preview: on
	Legacy editor: off
	Base theme: dark
	Community theme: none
	Snippets enabled: 0
	Restricted mode: on

RECOMMENDATIONS:
	none

[faheel]

From the dev tools I found the issue to be that the fill attribute is hardcoded and doesn’t use CSS variables:

Patch

For now I’ve added this custom CSS snippet to patch the styles:

.er.attributeBoxOdd {
  fill: var(--background-primary) !important;
}
.er.attributeBoxEven {
  fill: var(--background-secondary) !important;
}

[WhiteNoise]

thanks

[harr]

What Mermaid Theme does Obsidian use? If it’s theme-dark.js, lines 328 to 335 of the theme’s code might be of interest:

/* -------------------------------------------------- */
/* EntityRelationship diagrams                        */

this.attributeBackgroundColorOdd =
  this.attributeBackgroundColorOdd || lighten(this.background, 12);
this.attributeBackgroundColorEven =
  this.attributeBackgroundColorEven || lighten(this.background, 2);
/* -------------------------------------------------- */

[xGinoPilotinox]

you just made me realy happy :))

[WhiteNoise]

this is fixed in v1.8