Mermaid subgraph background too dark
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 68/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- css, scss
- Domain
- frontend
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.
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)
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 42
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.
More from quarto-dev/quarto-cli
-
documentation
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
quarto-dev/quarto-cli#14915 ·
-
binder bug
Difficulty 1/5 Under an hour Newbie friendliness 92/100
quarto-dev/quarto-cli#14907 · 3 comments · 1 reaction ·
-
brand bug
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
quarto-dev/quarto-cli#14891 ·
-
brand bug html revealjs
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
quarto-dev/quarto-cli#14882 ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
quarto-dev/quarto-cli#14875 ·
All issues in quarto-dev/quarto-cli
Similar issues
-
bug
Difficulty 1/5 Under an hour Newbie friendliness 90/100
apache/cloudstack#14222 ·
-
Browser Waiting for: Product Owner
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
getsentry/sentry-javascript#24577 · 1 comment ·
-
curation good first issue
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
amponce/archive-movie-browser#186 ·
-
light
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
aemdemos/patients-stryker#253 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
clerk/javascript#9852 ·