quarto-dev / quarto-dev/quarto-cli
Mermaid subgraph background too dark
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- JavaScript
- Sterne
- 6k
- Forks
- 458
- Ø Merge
- 1 T. 9 Std.
- Gemergte PRs (30 T.)
- 41
Beschreibung
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)
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne bei src/resources/formats/html/mermaid/embed-mermaid.css mit der Regel für den subgraph-Hintergrund und verfolge dann den im Issue beschriebenen Standardwert mermaid-fg-color--lightest. Reproduziere das Problem mit der bereitgestellten test.qmd und quarto preview; die Arbeit ist abgeschlossen, wenn die subgraph-Hintergründe in revealjs hell sind und die dokumentierte Anpassung weiterhin nutzbar ist.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- css, scss
- Bereich
- frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Aktivitätsstatus
- Ruhig
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 68/100