Skip to content

Fix dark highlighting themes missing base text color#14112

Open
jdonaldson wants to merge 1 commit intoquarto-dev:mainfrom
jdonaldson:fix/dark-theme-text-color-fallback
Open

Fix dark highlighting themes missing base text color#14112
jdonaldson wants to merge 1 commit intoquarto-dev:mainfrom
jdonaldson:fix/dark-theme-text-color-fallback

Conversation

@jdonaldson
Copy link

@jdonaldson jdonaldson commented Feb 25, 2026

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:

  1. $code-block-color never emitted for paired themes (format-html-scss.ts): The text-color extraction from the theme JSON was gated by !themeDescriptor.isAdaptive. When users specify separate light/dark themes (highlight-style: {light: kate, dark: zenburn}), isAdaptiveTheme() returns true because the config object has both light and dark keys — even though neither kate nor zenburn is actually an adaptive theme. So $code-block-color was never set as an SCSS variable.

  2. No span-level color rule (_bootstrap-rules.scss): Even with $code-block-color set, it was only applied to container elements (div.sourceCode, div.sourceCode pre.sourceCode). The light theme's syntax highlighting CSS generates code.sourceCode > span { color: #1f1c1b; } which has higher specificity than container inheritance.

Fix

  1. format-html-scss.ts: Move the text-color$code-block-color extraction outside the !isAdaptive guard. Adaptive themes handle their own background-color, but text-color still needs to propagate for Bootstrap rules to use.

  2. _bootstrap-rules.scss: Add span-level selectors (pre > code.sourceCode > span, code.sourceCode > span) alongside the existing container-level $code-block-color rules. This follows the same pattern as the existing background-color handling.

Affected themes

7 built-in themes missing "Normal" in text-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 includes code.sourceCode > span { color: #ccc; }
  • {light: kate, dark: espresso} → dark CSS now includes code.sourceCode > span { color: #bdae9d; }
  • Light mode unchanged (kate's rules still present, no regressions)

cc @mcanouil — this follows the _bootstrap-rules.scss pattern you suggested, plus fixes an upstream gating issue where $code-block-color was never emitted for paired (non-adaptive) themes.

@posit-snyk-bot
Copy link
Collaborator

posit-snyk-bot commented Feb 25, 2026

Snyk checks have passed. No issues have been found so far.

Status Scanner Critical High Medium Low Total (0)
Open Source Security 0 0 0 0 0 issues
Licenses 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@jdonaldson jdonaldson force-pushed the fix/dark-theme-text-color-fallback branch from f1b4446 to 1c8913a Compare February 25, 2026 03:57
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
@jdonaldson jdonaldson force-pushed the fix/dark-theme-text-color-fallback branch from 1c8913a to 1b5d0d8 Compare February 25, 2026 04:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dark syntax highlighting themes don't override light theme's base .sourceCode text color

2 participants