我可以为美人鱼图设置主题,使其响应深色模式吗?

Ori*_*rds 13 markdown github mermaid

我使用 Mermaid 图作为 GitHub 上 Markdown 文件的一部分。这样做的一个副作用是我无法访问 javascript,否则我可以用它来解决问题。

MermaidJS主题系统允许您在图表定义中内联指定自定义主题,如下所示:

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#93D0FF',
      'primaryTextColor': '#000'
    }
  }
}%%
flowchart TD;
    queue[Queue] -- Query for Items --> db[(Database)]
    db --> queue
    queue -- Found Item --> process[Process Item]
Run Code Online (Sandbox Code Playgroud)

这非常有效,只是颜色是硬编码的,而且我发现在深色模式下使用浏览器时,图表会设置为深色背景,并且某些部分变得不可读。

美人鱼具有“深色模式支持”,如果我根本不指定任何自定义主题,那么当浏览器处于深色模式时,它会自动选择深色模式兼容的主题。然而,默认的“灯光模式”美人鱼主题很丑,所以这不是一个很好的解决方案。

我想做的是这样的

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#93D0FF',
      'primaryTextColor': (darkMode ? '#fff' : '#000')
    }
  }
}%%
flowchart...
Run Code Online (Sandbox Code Playgroud)

然而,文档没有提及任何有关内部动态计算的内容themeVariables,并且我上面对三元运算符的尝试不起作用。

是否可以计算值,或以其他方式更改内联主题,使其在浅色和深色模式下工作,在 GitHub 等 JavaScript 不可用的环境中?


注意:mermaidjs 主题文档说有一个名为 的变量background。我尝试将其设置为强制背景颜色为白色(试图“选择退出”深色模式),但这也不起作用。