Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Mermaid subgraph background too dark

Abierto Apto para principiantes
  • ¿Algo no está bien?
#9,178 9 comentarios 7 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
68/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
css, scss
Área
frontend

Línea de trabajo

Comienza en src/resources/formats/html/mermaid/embed-mermaid.css, en la regla del fondo de subgraph, y luego sigue el valor predeterminado mermaid-fg-color--lightest descrito en el issue. Reproduce el problema con el test.qmd proporcionado y quarto preview; se considera terminado cuando los fondos de subgraph de revealjs sean claros y la personalización documentada siga siendo utilizable.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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)
Lenguaje dominante
JavaScript
Estrellas
6k
Forks
461
Merge medio
13 h 15 min
PR fusionados (30 d)
54

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de quarto-dev/quarto-cli

Todos los issues de quarto-dev/quarto-cli

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.