Mermaid diagram becomes unreadable in dark mode

[marwie]

The mermaid flowchart becomes unreadable when using github in a dark appearance setting.

Consider the following example

in lightmode text is readable fine

vs in darkmode text becomes unreadable due to low contrast

source page

  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;

Loading

[hybridherbst]

Turns out this is caused by setting custom background colors and then the auto-adjusted fonts not being readable on those colors anymore.
Is there a way to specify separate styling for light and dark mode?

Full diagram here since we'll remove the background colors from the referenced webpage for now as a workaround –

• switch GitHub to light mode: can read it
• switch GitHub to dark mode: can't read it anymore

Expected: some way to use colors and specify separate ones for dark mode

flowchart LR
    classDef ndl fill:#BCEDB1;
    classDef ext fill:#B1E1ED;
    Editor([Unity Editor]) --> EditorExt([Components + Tools])
    EditorExt -- export data --> glTF([glTF + Extensions])
    glTF --> Bundler([Bundler - vite])
    Runtime([Needle Runtime]) --> Bundler
    Three([Three.js]) --> Bundler
    YourWebsite([Classic web files - HTML, CSS, JS]) --> Bundler
    Bundler -- outputs --> DevPage([web app - dev])
    Bundler -- outputs --> DeploymentPage([web app - deploy])
    glTF -- compressed with --> gltfTransform([glTF-transform]) --> DeploymentPage
    class EditorExt,glTF,Runtime ndl;
    class Editor,Three,Bundler,Page,gltfTransform,DeploymentPage,DevPage,YourWebsite ext;

Loading

[adityabhaskar]

Not sure if you find a solution. My hack is to place the whole graph inside a subgraph. The subgraphs get a background which ensures visibility in both light/dark modes. Drawback: it will be bright in dark mode.

[adityabhaskar]

%%{ init: { 'theme': 'base' } }%%
flowchart LR
    classDef ndl fill:#BCEDB1;
    classDef ext fill:#B1E1ED;
    subgraph  
    direction LR
    Editor([Unity Editor]) --> EditorExt([Components + Tools])
    EditorExt -- export data --> glTF([glTF + Extensions])
    glTF --> Bundler([Bundler - vite])
    Runtime([Needle Runtime]) --> Bundler
    Three([Three.js]) --> Bundler
    YourWebsite([Classic web files - HTML, CSS, JS]) --> Bundler
    Bundler -- outputs --> DevPage([web app - dev])
    Bundler -- outputs --> DeploymentPage([web app - deploy])
    glTF -- compressed with --> gltfTransform([glTF-transform]) --> DeploymentPage
    end
    class EditorExt,glTF,Runtime ndl;
    class Editor,Three,Bundler,Page,gltfTransform,DeploymentPage,DevPage,YourWebsite ext;

Loading

[KSR-Yasuda]

With no theme specification, it looks using dark theme of Mermaid in GitHub dark mode, now:

flowchart LR
A --> B

flowchart LR
A --> B

Loading

However, with theme setting, it fixes allow / text colors, except base theme.

%%{ init : { "theme" : "default" }}%%
flowchart LR
A --> B

%%{ init : { "theme" : "default" }}%%
flowchart LR
A --> B

Loading

This does not change with "themeVariables" : { "background" : "#000" },
probably because the theme is setting specific colors.

%%{ init : { "theme" : "default", "themeVariables" : { "background" : "#000" }}}%%
flowchart LR
A --> B

%%{ init : { "theme" : "default", "themeVariables" : { "background" : "#000" }}}%%
flowchart LR
A --> B

Loading

To handle this, GitHub page should set CSS style background: #FFF for div.mermaid-view or div.mermaid, shouldn't it?

[cehfisher]

Hi @marwie - thank you for providing this feedback! We wanted to follow up on this issue. Have the dark theme changes resolved this issue for you? If yes, could you please close out this issue? If not, what additional changes are needed? Thank you! (cc @queenofcorgis)

[hybridherbst]

This is still unreadable for me:
https://github.com/orgs/community/discussions/35733#discussioncomment-3849187

[KSR-Yasuda]

I think now Mermaid light/dark theme mode is synchronized with GitHub light/dark theme mode.
So, Mermaid graphs with no color / theme specification do work.

However, Mermaid light/dark theming being poor,
if once Mermaid color / theme is set in the graph, it would break to be unreadable.

The graph @hybridherbst is talking about sets node fill color by classDef.
The fill color is brighter, however, Mermaid dark theme sets brighter color for text face, too.

Also, as I'm talking in the post,
Mermaid theme setting (%%{ init : { "theme" : "default" }}%%) determines
object colors without considering Mermaid light/dark theme setting.
In Mermaid { "theme" : "default" }, the arrow color is dark gray,
that melt into GitHub dark-themed page background color.

You should avoid Mermaid dark theme but fix to light mode,
regardless of GitHub light/dark theme configuration, shouldn't you?

[cehfisher]

This is still unreadable for me: https://github.com/orgs/community/discussions/35733#discussioncomment-3849187

Hello @hybridherbst - could you open up a new issue so we can track your specific use-case? The original poster's issue is resolved, but we don't want to lose this additional feedback. Thank you!

[cehfisher]

I think now Mermaid light/dark theme mode is synchronized with GitHub light/dark theme mode. So, Mermaid graphs with no color / theme specification do work.

However, Mermaid light/dark theming being poor, if once Mermaid color / theme is set in the graph, it would break to be unreadable.

The graph @hybridherbst is talking about sets node fill color by classDef. The fill color is brighter, however, Mermaid dark theme sets brighter color for text face, too.

Also, as I'm talking in the post, Mermaid theme setting (%%{ init : { "theme" : "default" }}%%) determines object colors without considering Mermaid light/dark theme setting. In Mermaid { "theme" : "default" }, the arrow color is dark gray, that melt into GitHub dark-themed page background color.

You should avoid Mermaid dark theme but fix to light mode, regardless of GitHub light/dark theme configuration, shouldn't you?

Hi @KSR-Yasuda - thank you for adding this additional context and links! From our read of your explanation, it sounds like this is more of a default theme issue with Mermaid and not something a GitHub can override in certain combinations. Is that accurate?

[KSR-Yasuda]

From our read of your explanation, it sounds like this is more of a default theme issue with Mermaid and not something a GitHub can override in certain combinations. Is that accurate?

@cehfisher Almost. You can say it's Mermaid light/dark theme setting issue:
Mermaid { "theme" : "SOME_THEME_NAME" } setting does not consider light/dark mode, but just assigns its theme color.

So, I suppose GitHub should not set Mermaid light/dark mode setting:
keep it light mode, and use white for the background color for Mermaid graph <div>.