Fix dark highlighting themes missing base text color#14112
Open
jdonaldson wants to merge 1 commit intoquarto-dev:mainfrom
Open
Fix dark highlighting themes missing base text color#14112jdonaldson wants to merge 1 commit intoquarto-dev:mainfrom
jdonaldson wants to merge 1 commit intoquarto-dev:mainfrom
Conversation
Collaborator
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
f1b4446 to
1c8913a
Compare
Two issues prevented dark syntax highlighting themes (zenburn,
espresso, etc.) from setting a base text color when paired with
a light theme:
1. In format-html-scss.ts, the $code-block-color SCSS variable
extraction was gated by !isAdaptive. When users specify separate
light/dark themes ({light: kate, dark: zenburn}), isAdaptive
returns true (because both keys exist), so $code-block-color
was never emitted. Move the text-color extraction outside the
isAdaptive guard — adaptive themes handle their own background,
but text-color still needs to propagate.
2. In _bootstrap-rules.scss, $code-block-color was only applied to
container elements (div.sourceCode, pre.sourceCode), but the
light theme's syntax highlighting CSS generates span-level rules
(code.sourceCode > span { color: #1f1c1b }) that override
container inheritance. Add matching span-level selectors.
Fixes quarto-dev#14099
1c8913a to
1b5d0d8
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #14099
Dark syntax highlighting themes like zenburn and espresso don't set a base text color when paired with a light theme. Unhighlighted code tokens inherit the light theme's near-black color, making them invisible against the dark background.
Root cause
Two issues:
$code-block-colornever emitted for paired themes (format-html-scss.ts): Thetext-colorextraction from the theme JSON was gated by!themeDescriptor.isAdaptive. When users specify separate light/dark themes (highlight-style: {light: kate, dark: zenburn}),isAdaptiveTheme()returnstruebecause the config object has bothlightanddarkkeys — even though neither kate nor zenburn is actually an adaptive theme. So$code-block-colorwas never set as an SCSS variable.No span-level color rule (
_bootstrap-rules.scss): Even with$code-block-colorset, it was only applied to container elements (div.sourceCode,div.sourceCode pre.sourceCode). The light theme's syntax highlighting CSS generatescode.sourceCode > span { color: #1f1c1b; }which has higher specificity than container inheritance.Fix
format-html-scss.ts: Move thetext-color→$code-block-colorextraction outside the!isAdaptiveguard. Adaptive themes handle their own background-color, but text-color still needs to propagate for Bootstrap rules to use._bootstrap-rules.scss: Add span-level selectors (pre > code.sourceCode > span,code.sourceCode > span) alongside the existing container-level$code-block-colorrules. This follows the same pattern as the existing background-color handling.Affected themes
7 built-in themes missing
"Normal"intext-styles: espresso, haddock, monochrome, none, pygments, tango, zenburn. Also covers user-created custom themes with the same structure.Verified
Built quarto from source and tested:
{light: kate, dark: zenburn}→ dark CSS now includescode.sourceCode > span { color: #ccc; }{light: kate, dark: espresso}→ dark CSS now includescode.sourceCode > span { color: #bdae9d; }cc @mcanouil — this follows the
_bootstrap-rules.scsspattern you suggested, plus fixes an upstream gating issue where$code-block-colorwas never emitted for paired (non-adaptive) themes.