quarto-dev / quarto-dev/quarto-cli

[mermaid] text not legible in dark mode

Open
#10,304 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug diagrams-mermaid themes
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:

Screenshot from 2024-07-16 22-33-08

In dark mode:

Screenshot from 2024-07-16 22-33-14

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:

Screenshot from 2024-07-16 22-33-49

In dark mode:

Screenshot from 2024-07-16 22-33-58

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.