Dark syntax highlighting themes don't override light theme's base .sourceCode text color
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 2/5
- Tiempo estimado
- 1-3 horas
- Aptitud para principiantes
- 76/100
- Tipo de issue
- Error
- Claridad
- Bien especificado
- Estado de actividad
- Estancado
- Stack tecnológico
- typescript
- Área
- frontend
Línea de trabajo
Comienza en src/command/render/pandoc-html.ts, en generateThemeCssClasses(), y compara después el tratamiento del estilo Normal con los campos de color del texto de nivel superior de los archivos de tema zenburn y espresso. Usa la reproducción proporcionada de _quarto.yml para claro/oscuro y verifica que el CSS generado para el tema oscuro incluya un color base legible para span en los temas que no tengan una entrada Normal.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
Description
When using light/dark theme toggling, certain dark syntax highlighting themes (zenburn, espresso) don't generate a base .sourceCode > span text color rule. The light theme's near-black base color persists in dark mode, making code tokens without a specific highlighting class invisible.
Root Cause
The bug is in generateThemeCssClasses(), not in the theme files. The function only emits the .sourceCode > span base color rule when it finds a "Normal" key in "text-styles". It never checks the top-level "text-color" as a fallback.
kate (light theme) has "Normal" in "text-styles":
"text-styles": {
"Normal": {"text-color": "#1f1c1b", ...}
}
→ Generates .sourceCode > span { color: #1f1c1b; }
zenburn (dark theme) is a valid Pandoc/KDE theme file — it defines "text-color": "#cccccc" at the top level, which is how these theme files can specify the default text color. But it has no "Normal" entry in "text-styles":
{
"text-color": "#cccccc",
"background-color": "#303030",
"text-styles": {
"Alert": {...},
"Keyword": {...},
...
// no "Normal" key
}
}
→ No base .sourceCode > span rule is generated.
Since Quarto layers dark CSS on top of light (// note: dark is layered on light, we don't disable primary!), the light theme's .sourceCode > span { color: #1f1c1b; } persists unchallenged in dark mode.
Note: the triple-stylesheet issue from #13450 is unrelated — Puppeteer testing confirms the quarto-color-scheme-extra sheets are properly disabled by JS on page load and don't cause this problem.
Affected Themes
7 themes are missing "Normal" in text-styles: espresso, haddock, monochrome, none, pygments, tango, zenburn.
Of the dark themes, espresso and zenburn are both affected — they define a top-level text-color but no "Normal" style. Any user-created custom theme with the same valid structure would also break silently.
Reproduction
# _quarto.yml
format:
html:
theme:
light: cosmo
dark: darkly
highlight-style:
light: kate
dark: zenburn
Any code block with tokens that don't get a specific span class (e.g., plain identifiers, punctuation) will be unreadable in dark mode:
Proposed Fix
In generateThemeCssClasses(), after processing text-styles, fall back to the theme's top-level "text-color" when no "Normal" style was found:
// After the Object.keys(textStyles).forEach loop:
if (!tokenCssByAbbr[""] && themeJson["text-color"]) {
const cssValues = [` color: ${themeJson["text-color"]};`, " font-style: inherit;"];
toCSS("", "Normal", cssValues);
["pre > code.sourceCode > span", "code.sourceCode > span",
"div.sourceCode,\ndiv.sourceCode pre.sourceCode"]
.forEach((selector) => {
otherLines.push(`\n${selector} {`);
otherLines.push(...cssValues);
otherLines.push("}\n");
});
}
Verified by creating a patched zenburn theme with "Normal" added (simulating the fix output) — dark highlighting CSS then emits .sourceCode > span { color: #cccccc; } and all code tokens are readable without any custom SCSS workarounds.
Workaround
body.quarto-dark {
pre.sourceCode,
.sourceCode > span,
code.sourceCode > span {
color: #dcdccc;
}
}
Environment
- Quarto 1.8.27
- macOS, Chrome/Safari
- Lenguaje dominante
- JavaScript
- Estrellas
- 6k
- Forks
- 458
- Merge medio
- 1 d 9 h
- PR fusionados (30 d)
- 41
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de quarto-dev/quarto-cli
-
binder bug
Dificultad 1/5 Menos de una hora Aptitud para principiantes 92/100
quarto-dev/quarto-cli#14907 · 3 comentarios ·
-
brand bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 68/100
quarto-dev/quarto-cli#14891 ·
-
brand bug html revealjs
Dificultad 2/5 1-3 horas Aptitud para principiantes 84/100
quarto-dev/quarto-cli#14882 ·
-
bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 85/100
quarto-dev/quarto-cli#14875 ·
-
Percent scripts: accept raw-string (r""") and '''-delimited markdown cells, as jupytext writes them Abiertoengines-jupyter enhancement
Dificultad 2/5 1-3 horas Aptitud para principiantes 84/100
quarto-dev/quarto-cli#14850 · 2 comentarios ·
Todos los issues de quarto-dev/quarto-cli
Issues similares
-
enhancement
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100
babalae/bettergi-scripts-list#3674 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 88/100
vadimdemedes/ink#1029 ·
-
code-quality refactoring
Dificultad 2/5 1-3 horas Aptitud para principiantes 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
Dificultad 2/5 1-3 horas Aptitud para principiantes 74/100
langchain-ai/deepagents#6450 ·
-
optimization optimization:agents-md-curator
Dificultad 2/5 1-3 horas Aptitud para principiantes 86/100
githubnext/gh-aw-cao#13143 ·