Mermaid Dark/Light Theme CSS snippet - adding contrast, providing template

Share & showcase Themes & CSS snippets
1

Hi all,
I’d like to share my solution for a problem that I faced with Mermaid graphs in Obsidian - low contrast, hard to read, especially in dark theme. Please find below the css-snippet for Obsidian (Settings - Appearance - CSS Snippets).

.mermaid svg {
	max-width: 100%;
	height: auto;
}

body.theme-light .mermaid .cluster rect
{
	stroke-width: 1px !important;
	stroke: var(--color-base-60) !important;
	fill: var(--color-base-05) !important;
} 
body.theme-light .mermaid .node * {
	stroke-width: 1px !important;
	stroke: var(--color-base-60) !important;
	fill: var(--color-base-25) !important;
}
body.theme-dark .mermaid .edgeLabel {
	background-color: var(--color-base-05) !important;
}


body.theme-dark .mermaid .cluster rect
{
	stroke-width: 1px !important;
	stroke: var(--color-base-60) !important;
	fill: var(--color-base-30) !important;
} 
body.theme-dark .mermaid .node * {
	stroke-width: 1px !important;
	stroke: var(--color-base-60) !important;
	fill: var(--color-base-20) !important;
}
body.theme-dark .mermaid .edgeLabel {
	background-color: var(--color-base-30) !important;
}
2 Likes
Mermaid: Low contrast of arrow heads in sequence diagram (dark theme)
2

Hi, this script worked for me:

.mermaid p,
.mermaid .venn-text-nodes span{
    background: transparent !important;
    color:  #000 !important;
}

.mermaid .edgeLabel div,
.mermaid .edgeLabel span {
    background: transparent !important;
    background-color: transparent !important;
}

.mermaid .edgeLabel rect {
    fill: transparent !important;
    opacity: 0 !important; 
}

.mermaid path,
.mermaid line 
{    
    stroke: rgba(128, 128, 128, 0.8) !important;
}