GitHub无JS支持时，如何让自定义Mermaid图表适配明暗模式？

用Mermaid双主题变量实现明暗适配 #

Mermaid原生支持在初始化配置里分别定义亮色、暗色模式的主题变量，完全不需要JavaScript，刚好适配GitHub的环境。你只需要在init配置中同时设置themeVariables（亮色模式用）和darkThemeVariables（暗色模式用）两个字段就行，示例代码如下：

%%{
  init: {
    "theme": "base",
    "themeVariables": {
      "primaryColor": "#93D0FF",
      "primaryTextColor": "#000"
    },
    "darkThemeVariables": {
      "primaryColor": "#93D0FF",
      "primaryTextColor": "#fff"
    }
  }
}%%
flowchart TD;
    queue[Queue] -- Query for Items --> db[(Database)]
    db --> queue
    queue -- Found Item --> process[Process Item]

这个配置会自动识别系统的明暗模式偏好：亮色模式下用themeVariables里的颜色设置，切换到暗色模式时就会自动换成darkThemeVariables的配置，完美解决硬编码颜色在暗色模式下看不清的问题。

避坑提醒 #

• 一定要以base主题为基础，其他内置主题比如default、forest可能会覆盖你的自定义变量，导致配置失效。
• 别尝试在主题变量里写三元运算符这类动态表达式，Mermaid的初始化配置是静态JSON，不支持运行时计算。
• 如果之前强制设置背景色没成功，试试把背景色配置放到darkThemeVariables里，比如添加"background": "#1e1e1e"，就能单独指定暗色模式下的背景了。

内容的提问来源于stack exchange，提问作者Orion Edwards