Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Mermaid subgraph background too dark

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#9,178 9 bình luận 7 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
68/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
css, scss
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu với quy tắc nền của subgraph trong src/resources/formats/html/mermaid/embed-mermaid.css, sau đó lần theo giá trị mặc định mermaid-fg-color--lightest được mô tả trong issue. Tái hiện bằng test.qmd được cung cấp và quarto preview; hoàn tất khi nền của subgraph trong revealjs có màu sáng và tùy chỉnh được tài liệu hóa vẫn có thể sử dụng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Your environment
  • IDE: nvim 0.10.0 (but I'm running preview from 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)
Ngôn ngữ chính
JavaScript
Star
6.1k
Fork
463
Merge trung bình
18 giờ 18 phút
Pull request đã merge (30 ngày)
61

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của quarto-dev/quarto-cli

Tất cả issue của quarto-dev/quarto-cli

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.