Mermaid diagrams are unreadable in dark mode #4814

Activity

1. christianlupus

   added

   bugSomething isn't workingSomething isn't working

   on Sep 21, 2023
2. juliusknorr

   added

   1. to develop

   on Oct 10, 2023
3. juliusknorr

   added this to 📝 Productivity teamon Oct 10, 2023
4. github-project-automation

   moved this to 🧭 Planning evaluation (don't pick) in 📝 Productivity teamon Oct 10, 2023
5. burrima commented on Oct 5, 2024

   

   burrima

   on Oct 5, 2024

   Last edited by burrima

   More actions

   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' } }%%
6. juliusknorr commented on Nov 6, 2024

   

   juliusknorr

   on Nov 6, 2024

   Last edited by juliusknorr

   Member

   More actions

   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.

   👍React with 👍1Reacted by UllisHellfireeXperiments
7. juliusknorr commented on Nov 6, 2024

   

   juliusknorr

   on Nov 6, 2024

   Member

   More actions

   Needs nextcloud-libraries/nextcloud-vue#5698
8. mejo-

   added 2 commits that reference this issue on Jul 26, 2025

   fix(mermaid): Use dark theme if appropriate

   ...

   This issue will close once commit 5d726df is merged into the 'main' branch.

   5d726df

   fix(mermaid): Use dark theme if appropriate

   ...

   This issue will close once commit 82aec91 is merged into the 'main' branch.

   82aec91
9. max-nextcloud

   closed this as completedin #7496on Jul 26, 2025
10. github-project-automation

    moved this from 🧭 Planning evaluation (don't pick) to ☑️ Done in 📝 Productivity teamon Jul 26, 2025
11. backportbot

    added 2 commits that reference this issue on Jul 26, 2025

    fix(mermaid): Use dark theme if appropriate

    ...

    This issue will close once commit 6f35e25 is merged into the 'main' branch.

    6f35e25

    fix(mermaid): Use dark theme if appropriate

    ...

    This issue will close once commit 4cec7ff is merged into the 'main' branch.

    4cec7ff
12. mejo-

    added 2 commits that reference this issue on Jul 26, 2025

    fix(mermaid): Use dark theme if appropriate

    ...

    This issue will close once commit ed49f86 is merged into the 'main' branch.

    ed49f86

    fix(mermaid): Use dark theme if appropriate

    ...

    This issue will close once commit b74e0ea is merged into the 'main' branch.

    b74e0ea
13. mejo-

    self-assigned this

    on Dec 13, 2025