How to Edit the Font Color of a bs4Dash bs4ProgressBar-CodePudding

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)

CodePudding user response：

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)