Mermaid diagrams are unreadable in dark mode

[christianlupus]

Describe the bug The background of the mermaid diagrams is transparent and the drawing color is a rather darkish gray. On the dark mode, the diagrams are almost impossible to read/see.

To Reproduce Steps to reproduce the behavior:

1. Enable dark mode
2. Open a text document
3. Insert a mermaid text block

Example:

sequenceDiagram
 actor A
 actor B
 A -> B : Somesthing
 activate B
 B --> A : Answer
 deactivate B

Expected behavior More contrast would be essential. Either make the drawing color of mermaid light or put a white background to it.

Screenshots If applicable, add screenshots to help explain your problem.

Server details: Current instance on cloud.nextcloud.com

Client details:

• OS: Archlinux
• Browser: Firefox
• Browser version: 110.0
• Device: Desktop/Laptop

[burrima]

Same issue here. Will this be planned anytime in reasonable future? Any work-around with custom CSS? My wish would be that support for plantuml would be added (with config option to specify own network-internal plantuml server).

Edit: found a temporary work-around. Add the following in front of each diagram: %%{init: {'theme': 'dark' } }%%

[juliusknorr]

I did a few experiments on how we can improve the theme handling of mermaid in text.

While ideally we could try to inject css variables we have into the theme, i think the easiest quick win is to just set the dark theme if we detect dark mode.

According to https://mermaid.js.org/config/theming.html#available-themes there is a darkMode theme variable, but I didn't see any noticable impact of setting this, so for now something like this should work:

diff --git a/src/nodes/CodeBlockView.vue b/src/nodes/CodeBlockView.vue
index 5e5fd7f70..7fcb58c48 100644
--- a/src/nodes/CodeBlockView.vue
+++ b/src/nodes/CodeBlockView.vue
@@ -204,7 +204,8 @@ export default {
                                // lazy load mermaid on first real usage
                                if (this.mermaid === null) {
                                        this.mermaid = (await import('mermaid')).default
-                                       this.mermaid.initialize({ startOnLoad: false })
+                                       const isDarkMode = window?.matchMedia('(prefers-color-scheme: dark)').matches && !document.querySelector('body[data-theme-light]')
+                                       this.mermaid.initialize({ startOnLoad: false, theme: isDarkMode ? 'dark' : 'default' })
                                }
                                await this.mermaid.parse(textContent)

Just trying to figure out the most reliable way to detect Nextcloud dark/light mode before opening a pr.

[juliusknorr]

Needs https://github.com/nextcloud-libraries/nextcloud-vue/pull/5698