Notebook preview header title takes the heading colour on the primary background
維護者通常 1 天內回覆
還沒有人認領這個 Issue。
評估
- 難度
- 2/5
- 預估耗時
- 1-3 小時
- 新手友好度
- 85/100
- Issue 類型
- 缺陷
- 描述清晰度
- 描述清楚
- 活躍度
- 活躍
- 技術堆疊
- bootstrap, javascript, sass
研究方向
從連結的嵌入範本 src/resources/formats/html/embed/template.html 開始，特別檢查第 126–129 行，並查看其中的樣式區塊以及 #quarto-embed-header.bg-primary 內的 h6。使用提供的自訂主題設定 $headings-color 和 notebook 嵌入範例重現問題。標題與返回按鈕的白色文字一致，且在主要背景上具有足夠的對比度時，即為完成。
由索引模型根據 Issue 內容生成。
描述
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
The notebook preview page puts its title in an h6 inside #quarto-embed-header.bg-primary.
.bg-primary sets only the background, and Bootstrap gives every heading color: var(--bs-heading-color).
When a theme sets $headings-color, the title takes that colour on the primary background, while the back button next to it stays white.
With default, cosmo, flatly, and litera, $headings-color is unset, so the title inherits white and the problem does not show.
A theme or brand with dark heading ink is enough to break it.
Steps to reproduce
_quarto.yml:
project:
type: website
website:
title: "Embed header"
format:
html:
theme: [default, custom.scss]
custom.scss:
/*-- scss:defaults --*/
$headings-color: #1f2a37;
index.qmd:
---
title: "Embed header contrast"
---
{{< embed notebook.ipynb#answer >}}
notebook.ipynb holds one code cell with #| label: answer and a saved output.
Run quarto render and open _site/notebook-preview.html.
Actual behavior
Computed colours in Chromium 156:
header background rgb(13, 110, 253)
h6 title rgb(31, 42, 55) 3.23:1
back link button rgb(255, 255, 255)
The title is 1.1em at weight 400, so it needs 4.5:1 under WCAG 2.2 Success Criterion 1.4.3.
With $primary: #47709a as well, the ratio drops to 2.81:1.
Expected behavior
The title uses the same colour as the back button beside it.
Adding #quarto-embed-header h6 { color: inherit; } to the page brings the title back to white (4.50:1 on the default primary).
That rule could sit in the style block of the embed template.
| Before | With color: inherit |
|---|---|
Your environment
- IDE: none, command line.
- OS: macOS 27.2.
- Browser: Chromium 156.0.8078.4 (Playwright).
Quarto check output
Reproduced with a development build of main at 089ba530b.
The embed template is the same at the v1.11.9 tag.
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
- 主要語言
- JavaScript
- 星號
- 6.1k
- 分支
- 478
- 平均合併
- 17 小時 53 分鐘
- 30 天內合併 PR
- 135
環境準備
- 沒有 Dockerfile 或 Docker Compose 檔案
- 有 Pull Request 範本
- 閱讀貢獻指南
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
quarto-dev/quarto-cli 的其他 Issue
-
bootstrap bug themes
難度 2/5 1-3 小時 新手友好度 82/100
quarto-dev/quarto-cli#15304 ·
維護者通常 1 天內回覆
-
accessibility bug code-blocks html themes
難度 2/5 1-3 小時 新手友好度 78/100
quarto-dev/quarto-cli#15303 ·
維護者通常 1 天內回覆
-
accessibility brand bug dark-mode
難度 2/5 1-3 小時 新手友好度 82/100
quarto-dev/quarto-cli#15301 ·
維護者通常 1 天內回覆
-
bootstrap bug html tables
難度 2/5 1-3 小時 新手友好度 75/100
quarto-dev/quarto-cli#15300 · 1 則留言 ·
維護者通常 1 天內回覆
-
bug html
難度 2/5 1-3 小時 新手友好度 78/100
quarto-dev/quarto-cli#15297 ·
維護者通常 1 天內回覆
查看 quarto-dev/quarto-cli 的全部 Issue
相似的 Issue
-
難度 2/5 1-3 小時 新手友好度 78/100
Fei-Away/Codex-Dream-Skin#449 ·
維護者通常 1 天內回覆
-
Claude Code plugin does not wire the edit-time Floor hook可能已有人在做 @dgr8akki 今天認領。 未關閉
難度 2/5 1-3 小時 新手友好度 78/100
維護者通常 4 天內回覆
-
Administration: required plugin configuration field stays invalid after restoring its saved value未關閉needs-triage Platform(Default)
難度 2/5 1-3 小時 新手友好度 74/100
維護者通常 1 天內回覆
-
bug
難度 2/5 1-3 小時 新手友好度 82/100
nearform/ag-grid-url-sync#314 · 1 個 reaction ·
維護者通常 1 天內回覆
-
chore
難度 2/5 1-3 小時 新手友好度 74/100
idean3885/claude-ops-agent#910 ·
維護者通常 1 天內回覆