Mermaid subgraph background too dark

[catanzaromj]

Bug description

As described in Issue #5416, the background of a mermaid subgraph is too dark when creating a revealjs presentation. It may extend to other formats, but that is my use case.

I think I found a temporary fix and a possible solution. As mentioned here, the variable mermaid-fg-color--lightest in your CSS/SCSS controls the subgraph background. For example, to set it to white:

/*-- scss:defaults --*/
//other stuff
$mermaid-fg-color--lightest:#FFFFFF;

In case it helps anyone debug this, this line sets the subgraph background color to mermaid-fg-color--lightest, since subgraphs are cluster elements. This defaults to $mermaid-fg-color--lightest: lighten($body-color, 20%); according to the docs. Should it default to a background color instead of a foreground color?

Steps to reproduce

The code from this post reproduces it for me:

---
title: "test"
format: revealjs
---

```{mermaid}
flowchart LR
  subgraph A [Layer 1]
    direction LR
    id1[Affine Function] --> id2[ReLU]
  end

  subgraph B [Layer 2]
    direction LR
    id2 --> id3[Affine Function]
  end
  
  subgraph C [Loss Function]
    direction LR
    id3 --> id4[MSE]
  end
```

Then run quarto preview test.qmd.

Expected behavior

I expect it to be light:

flowchart LR
  subgraph A [Layer 1]
    direction LR
    id1[Affine Function] --> id2[ReLU]
  end

  subgraph B [Layer 2]
    direction LR
    id2 --> id3[Affine Function]
  end
  
  subgraph C [Loss Function]
    direction LR
    id3 --> id4[MSE]
  end

Loading

Again, taken from this post.

Actual behavior

It is very dark. When I run quarto preview test.qmd, I get

Your environment

• IDE: nvim 0.10.0 (but I'm running preview from the command line)
• OS: Ubuntu 22.04
• quarto v1.4.550, installed from conda forge

Quarto check output

$ quarto check
Quarto 1.4.550
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.58.3: OK
      Deno version 1.37.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.4.550
      Path: 

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path:
      Version: 2023

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.2 (Conda)
      Path: 
      Jupyter: 5.5.0
      Kernels: 

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........(None)

[mcanouil]

Reveal.js does not use Bootstrap contrary to other Quarto HTML based formats and since Mermaid.js does make a lot of releases with many changes, it's no surprise that Quarto is bit behind in terms of theming compatibility.
This will be improved as much as possible, meantime the more reliable (in regards to Mermaid.js updates) would be to using Mermaid internal themes such as the neutral theme, see https://quarto.org/docs/authoring/diagrams.html#using-mermaids-built-in-themes.:

[cderv]

Some current workaround in the meantime share at

• Mermaid subgraphs in a flowchart have a too dark background #9259

[rcannood]

I'm closing #5416 in favour of creating separate, more specific issues. This issue seems like a good place to start!

I just updated the Mermaid demos in quarto to Quarto 1.5.54 using the Mermaid demos for Mermaid 10.2.4, and I can confirm that the described issue still persists in Quarto 1.5.54.

If it's ever necessary, I can update this demo page to verify whether the problem has been solved!

---

Mermaid docs on subgraphs: https://mermaid.js.org/syntax/flowchart.html#subgraphs

---

Output of the same example in Quarto 1.5.54: https://mermaid-demos-in-quarto.netlify.app/syntax/flowchart#subgraphs

[rcannood]

It should be noted that the subgraph colours simply seem to be swapped between dark and light mode, because when I view the same diagram in dark mode, it is suddenly very bright.

Mermaid docs in dark mode:

Quarto render in dark mode:

[duaneking]

I just want to point out for people with poor vision or who are visually disabled or who are just tired after a long day of looking at multiple monitors that this is an accessibility nightmare, and it actively creates a lot of pain and suffering.

[cderv]

@duaneking right now, as a users, a workaround is to tweak the styles to improve this.

---
format: 
  html: default
---

```{mermaid}
flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end
    
    style c1 fill: lightgray
    style a1 fill: lightgray
    style a2 fill: lightgray
    style ide1 fill: lightyellow
```

@gordonwoodhull as you are working on dark / light, did you look at mermaid yet ? Putting this on your radar as you may have insight. From #9178 (comment) there may be an issue with dark / light color being not considered correctly.