如何找出 rmarkdown / bslib 使用哪个 scss 变量为每个页面元素着色？

Question

我如何找出 rmarkdown / bslib 使用哪个 bootstrap scss 变量来为页面元素着色？例如为 TOC 背景着色？

这是一个页面的yaml

output:
  html_document:
    self_contained: false
    theme: 
      version: 4
      bootswatch: cyborg
    toc: yes
    toc_depth: 3
    toc_float:
      collapsed: true

Answer 1

有多种方法，但最简单的可能是使用开发人员工具。您可以在 RStudio 或您的浏览器中执行此操作。编织后，right-click 和 select“Inspect Element”、“Inspect”或类似的东西（不同的浏览器使用略有不同的名称）。

要么您的屏幕会移动以适应这个新视图，要么您会看到一个新的 window 打开。

在 RStudio 中，window 的左上角有一个 box/arrow 符号。单击它（对我来说它变为绿色）。

该图标如下所示：

然后将光标移至查看器窗格，移至 RMD 输出中您想了解更多信息的元素。 Select 单击该元素两次（不是 double-click，更像是 'select' 和“是的，我确定...”）。

Return 给检查员window。您会看到突出显示的内容。这是 RMD 输出中元素的 HTML 元素。

样式窗格的内容（右侧）具有样式 - 又名 CSS。

样式窗格上方的“样式”header 旁边是“已计算”。如果您 select“已计算”，您将获得已应用样式的摘要。

我的例子RMD标题是黑色的：

根据您的浏览器和 OS，这看起来可能会有所不同，但功能是相似的。如果您有任何问题，请告诉我。

更新

根据您的评论，这里有更多细节。

我从 bslib 模板的默认 RMD 开始，但将 YAML 替换为您问题中提供的那个。我添加了一些额外的 TOC 元素并删除了一些模板。这就是我的开始（将鼠标悬停在其中一个 TOC 元素上以显示对比）。

然后我去找检查员，select编辑了两次 TOC。然后我返回检查器 window 以查看突出显示的元素。

接下来，我转到 Computed 选项卡，然后滚动到元素 background-color.

这告诉我要寻找什么以及在哪里寻找。我可以转到检查器窗格 'Source'，但由于您向 Github 中的代码提供了 link，所以我去了那里。我搜索了“list-group”。这是我在那里找到的：

我现在可以返回 RMD 并更新我的 YAML，如下所示：

---
title: "Theming with bslib and thematic"
output:
  html_document:
    self_contained: false
    theme: 
      version: 4
      bootswatch: cyborg
      list-group-bg: '#b21e29'
      list-group-active-bg: '#dde26a'
    toc: yes
    toc_depth: 3
    toc_float:
      collapsed: true
---

（我选择了一个可怕的颜色组合，并非完全是偶然的...）

如何找出 rmarkdown / bslib 使用哪个 scss 变量为每个页面元素着色？

How to find out which scss variable is used by rmarkdown / bslib to color each page element?

r

sass

r-markdown

bootswatch

bslib

更新