How to use bslib/sass to change label layout in R shiny

Question

In the following R shiny program I use 2 labels "Enter text:" and "Enter choice:".

library(shiny)
library(bslib)

ui <- fluidPage(
  
  theme = bs_theme(version = 5, 
                   bootswatch = "litera",
                   base_font = "Arial", 
                   heading_font = "Arial",
                   font_scale = 1),
  
  sidebarLayout(
    
    # ui sidebarPanel ---------------------------------------------------------------
    sidebarPanel(
      br(),
      textInput("txt_input", 
                label = "Enter text:"),
      br(),
      selectInput("select", 
                  label = "Select choice:", 
                  choices = c("One", "Two", "Three"))
    ),
    
    mainPanel(
      br(),
      htmlOutput("result")
    )
  )
)

server <- function(input, output, session) {
  observe({
    output$result <- renderUI(
      HTML(sprintf("  Selected choice: %s", input$select))
    )
  })
}
shinyApp(ui, server)

I like to make all labels in my shiny app bold. How do I do that using a sass variable in bs_theme() ?

I cannot find the sass variable to change the layout of all labels in my R shiny program using bslib and sass variables. It should be easy using custom theming but I cannot find it.

Thanks for your help.

Answer 1

One way to do this would be to use css. The html class for the labels is .control-label and you can make font bold in css using font-weight:bold;. You can then put the css into the shiny directly by putting it inside tags$head(tags$style(HTML(CSS GOES HERE))). Here's what it looks like for your app:

(I also made the labels green, but that should be pretty easy to get rid of :D )

ui <- fluidPage(
  
  tags$head(
  tags$style(HTML(
              ".control-label{
                               font-weight:bold;
                               color:green;
                               }
             "))),
  
  theme = bs_theme(version = 5, 
                   bootswatch = "litera",
                   base_font = "Arial", 
                   heading_font = "Arial",
                   font_scale = 1),
  
  sidebarLayout(
    
    # ui sidebarPanel ---------------------------------------------------------------
    sidebarPanel(
      br(),
      textInput("txt_input", 
                label = "Enter text:"),
      br(),
      selectInput("select", 
                  label = "Select choice:", 
                  choices = c("One", "Two", "Three"))
    ),
    
    mainPanel(
      br(),
      htmlOutput("result")
    )
  )
)

Answer 2

Thanks for your answer, I fully agree with your solution and it works perfect. But I was looking for a different approach using bslib, bs_theme and sass-variables. I continued my search and I found the sass variables for modifying my labels here: https://rstudio.github.io/bslib/articles/bs5-variables.html. The sass variables I was looking for are form-label-color and form-label-font_weight. So the following code gives the same result as using your css solution:

theme = bs_theme(version = 5,
               bootswatch = "litera",
               base_font = "Arial",
               heading_font = "Arial",
               font_scale = 1,
               "form-label-color" = "green",
               "form-label-font_weight" = 700)