quarto-dev / quarto-dev/quarto-cli
[mermaid] text not legible in dark mode
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
Bug description
Diagrams that are legible in light more are not in dark mode, because the text colour doesn't appear to change.
Steps to reproduce
I created a data-intuitive/mermaid-demos-in-quarto repository reproduce and compare the mermaidjs demos.
An example that demonstrates this issue is this one: https://mermaid-demos-in-quarto.netlify.app/syntax/flowchart#graph-declarations-with-spaces-between-vertices-and-link-and-without-semicolon
In light mode using quarto 1.5.54:
In dark mode:
If it's ever necessary, I can update this demo page to verify whether the problem has been solved!
Expected behavior
This is the same diagram on the mermaid docs: https://mermaid.js.org/syntax/flowchart.html#graph-declarations-with-spaces-between-vertices-and-link-and-without-semicolon
In light mode:
In dark mode:
Actual behavior
No response
Your environment
- quarto 1.5.54, which uses mermaid 10.2.0 rc2
- mermaid diagrams fetched from mermaid 10.2.4
Quarto check output
$ quarto check
Quarto 1.5.54
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.2.0: OK
Dart Sass version 1.70.0: OK
Deno version 1.41.0: OK
Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.5.54
Path: /home/rcannood/.local/share/quarto-1.5.54/bin
[✓] Checking tools....................OK
TinyTeX: (not installed)
Chromium: (not installed)
[✓] Checking LaTeX....................OK
Using: Installation From Path
Path: /usr/bin
Version: 2023
[✓] Checking basic markdown render....OK
[✓] Checking Python 3 installation....OK
Version: 3.12.4
Path: /usr/bin/python3
Jupyter: 5.7.2
Kernels: python3
[✓] Checking Jupyter engine render....OK
[✓] Checking R installation...........OK
Version: 4.3.3
Path: /usr/lib64/R
LibPaths:
- /home/rcannood/R/x86_64-redhat-linux-gnu-library/4.3
- /usr/lib64/R/library
- /usr/share/R/library
knitr: 1.47
rmarkdown: 2.27
[✓] Checking Knitr engine render......OK
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 by rendering the linked mermaid-demos-in-quarto example with Quarto 1.5.54 and compare its generated diagram in light and dark modes. Inspect how Mermaid diagram text styling is handled, then verify that the text is legible in dark mode without regressing light mode.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100