Skip to content

Code cell numbering in embeds is invisible in dark themes #14932

Description

@cwickham

I have

  • searched the issue tracker for similar issues
  • installed the latest version of Quarto CLI
  • formatted my issue following the Bug Reports guide

Bug description

In dark themes, the cell number (e.g. In [1]:, In [2]:, ...) from an embedded code cell ends up very dark on a dark background and fails contrast minimums.

These cell numbers are a bare <pre> inside a .cell-decorator div (<div class="cell-decorator"><pre>In [2]:</pre></div>) — the <pre> itself has no class, so its text color comes from an unscoped, generic pre rule rather than anything specific to .cell-decorator.

Bootstrap's own pre rule (_reboot.scss#L300) sets color: $pre-color, which defaults to $body-emphasis-color (_variables.scss#L1774-L1775) — a light-mode-oriented near-black. Quarto's own override (_bootstrap-rules.scss#L949-L953) resets background-color to initial (so .cell-decorator's bare <pre> blends into the page) but never resets color, so the hardcoded near-black text is left sitting on whatever background the page inherits.

Bootstrap's own dark themes carry a defensive fix for exactly this: darkly.scss#L184 and cyborg.scss#L192 both set $pre-color: inherit !default;.

Steps to reproduce

---
title: "Repro"
theme: dark.scss
---

{{< embed source.qmd#cell-one >}}

with dark.scss:

/*-- scss:defaults --*/
$body-bg: #151515;
$body-color: #f8f8f8;

/*-- scss:rules --*/

and source.qmd:

---
title: "Source"
---

```{r}
#| label: cell-one
1 + 1
```

quarto render index.qmd

Actual behavior

The compiled theme CSS resolves to:

pre{...color:#000;background-color:#f8f9fa;...}
pre{background-color:initial;padding:initial;border:initial}

.cell-decorator's <pre> ends up with color: #000 on the page's
$body-bg (#151515) — a contrast ratio of ~1.15:1.

Screenshot with no output visible above 'Source:' line.

Expected behavior

.cell-decorator's <pre> text should meet 4.5:1 contrast against the
theme's own background, the same way Bootswatch's dark themes handle it.

Screenshot with visible `[1] 2`

Author workaround (that generated screenshot): add $pre-color: inherit !default; to the theme's
scss:defaults block:

/*-- scss:defaults --*/
$body-bg: #151515;
$body-color: #f8f8f8;
$pre-color: inherit !default;
/*-- scss:rules --*/

Your environment

  • IDE: none (CLI render)
  • OS: macOS 26.6.2 (build 25G83)

Quarto check output

Quarto 1.11.4
[✓] Checking environment information...
      Quarto cache location: /Users/charlottewickham/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.101.0: OK
      Deno version 2.7.14: OK
      Typst version 0.15.1: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.11.4
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: v2026.04
      Chrome Headless Shell: 150.0.7871.115
      VeraPDF: 1.28.2

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/charlottewickham/Library/TinyTeX/bin/universal-darwin
      Version: 2026

[✓] Checking Chrome Headless....................OK
      Using: Chrome Headless Shell installed by Quarto
      Path: /Users/charlottewickham/Library/Application Support/quarto/chrome-headless-shell/chrome-headless-shell-mac-arm64/chrome-headless-shell
      Version: 150.0.7871.115

[✓] Checking basic markdown render....OK

[✓] Checking R installation...........OK
      Version: 4.6.0
      Path: /Library/Frameworks/R.framework/Versions/4.6/Resources
      LibPaths:
        - /Users/charlottewickham/Library/R/arm64/4.6/library
        - /Library/Frameworks/R.framework/Versions/4.6/Resources/library
      knitr: 1.51
      rmarkdown: 2.31

[✓] Checking Knitr engine render......OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.2
      Path: /Users/charlottewickham/.pyenv/versions/3.12.2/bin/python3
      Jupyter: 5.9.1
      Kernels: python3

[✓] Checking Jupyter engine render....OK

[✓] Checking Julia installation...

Investigated with AI assistance, grounded in a local clone of quarto-cli
(see CONTRIBUTING.md "Using AI tools to investigate").

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilitybugSomething isn't workinghtmlIssues with HTML and related web technology (html/css/scss/js)themesRelated to HTML theming or any other style related issue (like highlight-style)

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions