Code copy button icon ignores the button colour

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#15,303 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
78/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
css, html, scss
Bereich
accessibility, frontend

Rechercherichtung

Beginne mit src/resources/formats/html/_quarto-rules-copy-code.scss, das im Issue verlinkt ist, und untersuche die Regeln für die Icons zum Kopieren und für das Kopieren, einschließlich ihrer Hover-Varianten. Der Bericht nennt kompilierte SVG-Füllungen als Ursache und schlägt eine Maske mit currentColor vor. Die Aufgabe ist erledigt, wenn beide Icons in allen Themes und Hover-Zuständen der CSS-Farbe des Buttons folgen, auch auf einem dunklen Codeblock.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

accessibility bug code-blocks html themes
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

Quarto draws the copy button icon as a background-image SVG with its fill set at compile time from $btn-code-copy-color.
A background image can't read currentColor, so the icon keeps that compiled grey whatever colour the button gets in CSS.

This matters when a code block doesn't use the page's code background.
A dark "terminal" block on a light page is a common case.
Setting color on .code-copy-button is the natural fix, but the icon doesn't follow it.
On the dark block below, the icon is rgb(94, 94, 94) on rgb(17, 20, 24), which is 2.85:1 and under the 3:1 that WCAG 2.2 Success Criterion 1.4.11 asks for.

The same applies to the copied (check) icon and to the hover variants.

Steps to reproduce
---
title: "Copy button icon colour"
format:
  html:
    theme:
      light: default
      dark: darkly
    include-in-header:
      text: |
        <style>
        pre.dark-block,
        div.sourceCode:has(> pre.dark-block) {
          background-color: #111418;
          color: #e6e8eb;
        }
        .code-copy-outer-scaffold:has(pre.dark-block) .code-copy-button {
          color: #e6e8eb;
        }
        </style>
---

```{.bash .dark-block}
echo "hello"
```

Render it, hover the code block, and look at the copy button.

Actual behavior

The button computes color: rgb(230, 232, 235), but its .bi::before still paints the compiled icon:

background-image: url('data:image/svg+xml,<svg ... fill="rgb(94, 94, 94)" ...>');

The icon is grey on the dark block in both colour schemes.

Grey copy icon on a dark code block, barely visible

Expected behavior

The icon follows the colour of the button, so a theme or a page can recolour it with color alone.
Drawing the icon as a mask-image over background-color: currentColor would do this, and $btn-code-copy-color could then set the button's color instead of the SVG fill.

Your environment
  • IDE: none, the document is rendered with quarto render in a terminal.
  • OS: macOS 27.2 (Apple Silicon).
  • Browser: Brave (Chromium).
  • Quarto: a development build at 089ba530, which contains the v1.12.0 pre-release; _quarto-rules-copy-code.scss is the same in v1.11.9, v1.12.0, and on main.
Quarto check output
Quarto 99.9.9

[✓] Checking environment information...
      Quarto cache location: /Users/mcanouil/Library/Caches/quarto
      Project: none found (single-file mode)

[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.107.1: OK
      Deno version 2.9.8: OK
      Typst version 0.15.1: OK

[✓] Checking versions of quarto dependencies......OK

[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: 089ba530b3ed4ec156a355d41b6b7de2db3e44ea
      Path: /Users/mcanouil/Projects/quarto-dev/quarto-cli/package/dist/bin

[✓] Checking tools....................OK
      TinyTeX: v2026.07
      Chrome Headless Shell: (not installed)
      VeraPDF: (not installed)

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

[✓] Checking Chrome Headless....................OK
      Using: Chrome from QUARTO_CHROMIUM
      Path: /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

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

ℹ R version 4.6.1 (2026-06-24)
! Config '~/.Rprofile' was loaded!

[✓] Checking R installation...........OK
      Version: 4.6.1
      Path: /Library/Frameworks/R.framework/Versions/4.6/Resources
      LibPaths:
        - /Users/mcanouil/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.9.6
      Path: /Library/Developer/CommandLineTools/usr/bin/python3
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking Julia installation...
Vorherrschende Sprache
JavaScript
Sterne
6.1k
Forks
478
Ø Merge
17 Std. 53 Min.
Gemergte PRs (30 T.)
135

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus quarto-dev/quarto-cli

Alle Issues in quarto-dev/quarto-cli

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.