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

Question

How can i find out which bootstrap scss variable is used by rmarkdown / bslib to color page elements? e.g. for coloring the TOC background?

Here is a page's yaml

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

Recommendatory

Answer 1

There are several ways, but the easiest might be to use developer tools. You can do this in RStudio or your browser. After knitting, right-click and select "Inspect Element," "Inspect," or something along those lines (different browsers use slightly different names).

Either your screen will shift to fit this new view, or you'll see a new window open.

In RStudio, the top left of the window has a box/arrow symbol. Click it on (it turns green for me).

That icon looks like this:

Then move your cursor to the viewer pane, to the element in your RMD output that you want to know more about. Select the element by clicking on it two times (not double-click, more like 'select' and 'ya, I'm sure...').

Return to the inspector window. You're going to see something is highlighted. That's the HTML element for the element in your RMD output.

The style pane's content (on the right) has the styling—AKA CSS.

Next to the "Styles" header over the styles pane is "Computed." If you select "Computed," you'll get a summary of the applied styles.

My example RMD title is black:

This could look different depending on your browser and your OS, but the functionality is similar. If you have any questions, let me know.

---

Update

From your comments, here are more specifics.

I started with the default RMD for bslib templates but replaced the YAML with the one provided in your question. I added some additional TOC elements and deleted a bit of the template. This is what I started with (hovering on one of the TOC elements to show the contrast).

Then I went to the inspector and selected the TOC two times. Then I returned to the inspector window to see what element was highlighted.

Next, I went to the Computed tab, and scrolled to the element background-color.

This told me what to look for and where to look. I could go to the inspector pane 'Source', but since you provided the link to the code in Github, I went there. I searched for "list-group." This is what I found there:

I can go back to the RMD and update my YAML now, like this:

---
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
---

(I choose a hideous color combination, not entirely on accident...)

Robichaud

Thanks for your answer, but I would like to know the variable not the value. For example, I would like to find out that the color is $form-feedback-valid-color github.com/rstudio/bslib/blob/888fbe0/inst/lib/bs4/scss/… – Recommendatory

It is $list-group-bg I found it by taking the approach I outlined above. Generally speaking JS is used to set the colors, so they attribute class of the HTML element will tell you most of what you need to know (the element class was #list-group). I validated it in HTML, as well. If you want to know the tag for the hover color: $list-group-hover-bg – Robichaud

This is a strong indication. Is there a proof? – Recommendatory

I've updated my answer with all of the steps to go fishing and catch something (instead of eating for a day). – Robichaud

Thank you. I will accept your answer if there is no other. I would be completely satisfied if I could find out the exact point, in the bslib library's code, where the color of this element is specified. – Recommendatory

The image I used from the SCSS file is where the color is assigned. For this documentation style, there are hex (or similar) designated colors assigned variables at the beginning of the SCSS file. These variables are used to propagate to the rest of the file. This makes it easier to change a theme-wide color. For example, $blue: #007bff !default is one of the designations. If I wanted everything that is this shade of blue to be a different color, I only have to change one variable. BTW, the word "blue" here is just a variable name; it could be any non-keyword. – Robichaud

I know that. I mean where the ,tocify class(es) are defined. – Recommendatory

Do you by any chance know the answer to my other question?#71703397 – Recommendatory

The class tocify is from the Bootswatch Cyborg theme. You can get to this the same way. However, you won't look at computed. (You aren't looking for a specific style attribute.) Instead, look in the styles pane. In the second image (first large image) in my answer, there's a view of the styles pane. The class label you're looking for will be in place of where you see data:text/css... in that image. There are no color attribute styles assigned to this class (there is padding, text-indent, font size, etc.). I already answered your other question. Thanks! – Robichaud

@Robichaud I've heard that you are really good! Do you have any idea about that? ;-) #71765536 – Gassaway

You made me smile! Thanks. Question answered... :) – Robichaud