Theme (dark/light) on a per note basis?

Devs: Theme Design & Custom CSS
1

What I’m trying to do

I’m much more comfy in dark mode, however the mermaid charts generally are borderline unreadable, so I would like to have the light mode applied to specific notes bodies.

Things I have tried

Tried to vibe code a custom css, and it kinda works, but it looks much much worse than the light mode.

Is it possible to apply the exact light mode to the body of specific notes?

2

Yeah, by default, mermaid diagrams aren’t well readable.

You could try to download Dune-mermaid.css from my theme repo.

3

Take what you find in

to your LLM and apply it to mermaid diagrams, images, whatever.

4

How about making the dark mode’s Mermaid diagram itself—not the entire note—the same as in light mode? And of course its background.

.theme-dark .mermaid {
	background-color: #fff;
}

.theme-dark .mermaid > svg {
	filter: unset;
}

If your link colors are significantly different between light and dark modes and you want them to match, then you can set that too:

.theme-dark .mermaid a {
	--link-color: var(--color-accent);
	--link-color-hover: lime;
}

(Replace “lime”. Or don’t; go wild.)

7

this was the best suggestion, it is almost workable - thank you. however, the chart’s width exceeds the background’s width, so now the right part if the chart is hanging “in the air”.

8

I see what you mean. My first thought was to color the entire container, but now that you mention it, this might be better (replace the other snippet with this):

.theme-dark .mermaid > svg {
	background-color: #fff;
	filter: unset;
}

Maybe you already know this and it doesn’t suit you, but mentioning in case: Mermaid allows theme customization in its front matter. And it has its own version of a dark mode. Theme Configuration | Mermaid. You’d have to do every instance though, I think.

9

The expectation doesn’t make sense to me.
Wouldn’t the real need is just readable Mermaid diagrams regardless of theme?

My approach on plantuml diagrams (which I think are superior to mermaid and is supported by Obsidian and even by Ole’s Digital Garden, and it too can be added styling) is use filter to adjust the colours to make it readable and make the whole diagram blend into the light and dark theme as well. That’s why I pointed at the autoadaptive thread above.

Try e.g.

.theme-dark .mermaid > svg {
  filter: invert(100%);
  mix-blend-mode: screen;
  width: 100%;
}

Or if you have a custom theme (using Gruvbox on my published blog, hence the choice percentages) you may want to tinker with sepia colours:

.theme-dark .mermaid > svg {
  filter: invert(92.66%) sepia(73.54%);
  mix-blend-mode: screen;
  width: 100%;
}

If you don’t like it, ignore this.