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 小时 新手友好度 73/100
hugomrdias/playwright-test#753 ·
维护者通常 1 天内回复
-
bug good first issue
难度 2/5 1-3 小时 新手友好度 86/100
KonstantinStarovoytov/kitden#21 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 67/100
-
难度 2/5 1-3 小时 新手友好度 70/100
guybedford/es-module-shims#556 ·
-
app ernst:4-klein
难度 2/5 1-3 小时 新手友好度 75/100
NewspeedyNL/PidLane#683 ·
维护者通常 1 天内回复