rshinybs4dash

How to Edit the Font Color of a bs4Dash bs4ProgressBar


I have an R Shiny bs4Dash bs4ProgressBar running in an app. I can edit the background colours with the status argument, but I can’t find a way to edit the font colour, and in the real app there is often no contrast when the background is white. How can I apply style to the font to make it black, my attempts, one of which is below, haven’t worked?

Thanks in advance.

library(shiny)
library(bs4Dash)

ui <- fluidPage(

  tags$style(".prgs_fnt progress-bar {color: #000000 !important;}")
  , div(class = 'prgs_fnt'
        , bs4Dash::bs4ProgressBar(
          value      = 12
          , striped  = FALSE
          , status   = 'primary'
          , label    = '12'
          , vertical = F
          , min      = 0
          , max      = 20
        )
  )

)

server <- function(input, output, session) {}
shinyApp(ui, server)

Solution

  • There is no argument in bs4ProgressBar to change the font color, but We can use CSS to do this:

    library(shiny)
    library(bs4Dash)
    
    ui <- fluidPage(
      
      tags$head(
        tags$style(HTML("
    .prgs_fnt > .progress > .progress-bar {
      color: #f00
    }
    
          "))
      ),
    
      tags$style(".prgs_fnt progress-bar {color: #000000 !important;}")
      , div(class = 'prgs_fnt'
            , bs4Dash::bs4ProgressBar(
              value      = 12
              , striped  = FALSE
              , status   = 'primary'
              , label    = '12'
              , vertical = F
              , min      = 0
              , max      = 20
            )
      )
      
    )
    
    server <- function(input, output, session) {}
    shinyApp(ui, server)