quarto-dev / quarto-dev/quarto-cli
Mermaid subgraph background too dark
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
Bug description
As described in Issue https://github.com/quarto-dev/quarto-cli/issues/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
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
previewfrom 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)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with src/resources/formats/html/mermaid/embed-mermaid.css at the subgraph background rule, then trace the mermaid-fg-color--lightest default described in the issue. Reproduce with the provided test.qmd and quarto preview; done means revealjs subgraph backgrounds are light while the documented customization remains usable.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, scss
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100