7

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
Brani
  • 6,454
  • 15
  • 46
  • 49

1 Answers1

4

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: enter image description here

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.

enter image description here

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.

enter image description here

My example RMD title is black:

enter image description here

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

enter image description here

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.

enter image description here

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

enter image description here

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:

enter image description here

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

enter image description here

Kat
  • 15,669
  • 3
  • 18
  • 51
  • 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 https://github.com/rstudio/bslib/blob/888fbe0/inst/lib/bs4/scss/_variables.scss#L678 – Brani Apr 03 '22 at 07:48
  • 1
    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 – Kat Apr 03 '22 at 15:33
  • This is a strong indication. Is there a proof? – Brani Apr 03 '22 at 17:04
  • 1
    I've updated my answer with all of the steps to go fishing and catch something (instead of eating for a day). – Kat Apr 03 '22 at 21:55
  • 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. – Brani Apr 04 '22 at 06:15
  • 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. – Kat Apr 04 '22 at 14:01
  • I know that. I mean where the ,`tocify` class(es) are defined. – Brani Apr 04 '22 at 14:14
  • Do you by any chance know the answer to my other question?https://stackoverflow.com/questions/71702897/change-the-chartarea-background-color-of-gvisannotationchart – Brani Apr 04 '22 at 14:17
  • 1
    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! – Kat Apr 04 '22 at 15:18
  • @Kat I've heard that you are really good! Do you have any idea about that? ;-) https://stackoverflow.com/questions/71765036/why-do-the-colors-of-the-slate-bootswatch-4-theme-appear-wrong – gd047 Apr 06 '22 at 10:31
  • You made me smile! Thanks. Question answered... :) – Kat Apr 06 '22 at 15:02