Code copy button icon ignores the button colour

未关闭 适合新手
  • 哪里不对？
#15,303 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
78/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
css, html, scss
领域
accessibility, frontend

调研方向

从 issue 中链接的 src/resources/formats/html/_quarto-rules-copy-code.scss 入手，检查复制图标和已复制图标的规则，包括它们的悬停变体。报告指出，编译后的 SVG 填充是问题原因，并建议使用 currentColor 的蒙版。完成标准是：两个图标在各种主题和悬停状态下都跟随按钮的 CSS 颜色，包括在深色代码块上。

由索引模型根据 Issue 内容生成。

描述

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...
主要语言
JavaScript
星标
6.1k
派生
478
平均合并
17 小时 53 分钟
30 天内合并 PR
135

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

quarto-dev/quarto-cli 的其他 Issue

查看 quarto-dev/quarto-cli 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。