Quarto中Reveal.js代码折叠按钮颜色异常问题求助

原因 #

Quarto的Reveal.js模板中，代码折叠按钮的文本颜色默认继承全局$body-color变量。当你设置$body-color: $primarycolor !default时，按钮的背景色可能与$primarycolor存在关联（或是模板内置了对比度自动适配逻辑），导致文本颜色被强制调整为奇怪的绿色以保证可读性；但移除该设置后，全局文本颜色回到默认值，又无法满足幻灯片配色需求。

解决方法 #

方法1：用自定义CSS精准控制按钮文本颜色 #

直接编写自定义CSS规则，指定代码折叠按钮的文本颜色，不受全局变量影响：

/* 在自定义CSS文件中添加 */
.code-fold-btn {
  color: #你的目标文本颜色 !important;
}

将上述代码放入自定义CSS文件（比如custom.css），并在Quarto配置文件中引用：

---
title: 你的幻灯片标题
format:
  revealjs:
    css: custom.css
    code-fold: true
---

方法2：通过SCSS变量单独设置按钮文本颜色 #

如果使用SCSS管理样式，可以先设置全局$body-color，再单独覆盖按钮的文本颜色：

/* 在_quarto.scss文件中添加 */
$primarycolor: #你的主色调;
$body-color: $primarycolor !default;

/* 单独指定代码折叠按钮的文本颜色 */
.code-fold-btn {
  color: #你想要的按钮文本颜色;
}

同样在Quarto配置中引用SCSS文件：

---
title: 你的幻灯片标题
format:
  revealjs:
    css: _quarto.scss
    code-fold: true
---

内容的提问来源于stack exchange，提问作者Joshua Merfeld