Mermaid config doesn't work.

[Erifirin]

I tried to change mermaid theme as it described in documentation: https://sli.dev/custom/config-mermaid. I created a file ./setup/mermaid.ts and copied example into it. But it didn't change anything and mermaid still uses the default theme. However, custom theme variables work properly if mermaid.ts is changed while slidev is running. After restarting slidev, mermaid reverts back to default theme.

Minimal reproduction

Steps to reproduce the behavior:

1. Create ./setup/mermaid.ts with content from example https://sli.dev/custom/config-mermaid#custom-theme-styles;
2. Run slidev;
3. Go to slide with mermaid graph/flowchart.

Environment

• Slidev: 0.49.27, 0.49.29
• Browser: chrome 128
• OS: win 10

[KermanX]

possibly #1830

[Erifirin]

No, I have one instance of slidev running from terminal. Moreover, I've faced the same behavior on macos.

os: macos 14.6.1 (M1, 2020)
browser: safari
node: 22.7.0
slidev: 0.49.29

Here's what I do:

1. mkdir slides
2. cd slides
3. npm init slidev@latest
   Project name: test
   Install and start it now?: yes
   Choose the package manager: npm
4. Wait for presentation to open. Go to slide 12.
5. Create ./setup/mermaid.ts with following (taken from mermaid examples)

import { defineMermaidSetup } from '@slidev/types'

export default defineMermaidSetup(() => {
  return {
    theme: 'base',
    themeVariables: {
      primaryColor: '#BB2528',
      primaryTextColor: '#fff',
      primaryBorderColor: '#7C0000',
      lineColor: '#F8B229',
      secondaryColor: '#006100',
      tertiaryColor: '#fff'
    }
  }
})

6. Go back to the slides. Nothing has changed.
   

7. Ok. Return to terminal with slidev and press r to restart.

8. In browser go to slide 12 again. Nothing has changed.

9. Make any minor edits to the file ./setup/mermaid.ts and save.

10. Go to slide 12. Wow! All the arrows turned yellow, but rest remained the same:
    

11. Now let's stop slidev by pressing q.

12. And start it again:
    cd test
npm exec slidev

13. Go to slide 12 and it again uses default theme:
    

In result, the only working way to change the mermaid theme is to write themeVariables in each mermaid block. It works perfect but very inconvenient.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#BB2528',
      'primaryTextColor': '#fff',
      'primaryBorderColor': '#7C0000',
      'lineColor': '#F8B229',
      'secondaryColor': '#006100',
      'tertiaryColor': '#fff'
    }
  }
}%%

[Erifirin]

@KermanX It seems I've managed to resolve it.
It's necessary to force empty a browser cache after creating file ./setup/mermaid.ts. Now defineMermaidSetup() method is called every time the slidev is launched. As a result, the colors of the diagrams change, although not completely. In light theme everything works well, but in dark theme only part of themeVariables are applied :)