Change color in shinydashboard

Question

I have the following which changes the color of the primary status in shinydashboard to the custom blue I have stated.

tags$style(HTML(".box.box-solid.box-primary>.box-header {
                                color:#FFFFFF;
                                background-color:#005CB9;}

                                .box.box-solid.box-primary{
                                border-bottom-color:#005CB9;
                                border-left-color:#005CB9;
                                border-right-color:#005CB9;
                                border-top-color:#005CB9;
                                }")),

However I need to change the color of an infobox as this uses color = instead of the status =. Does anyone know the tags I need to change to customise one of the default colors in shinydashboard?

Thanks

Answer 1

I used the following style() statement at the beginning of the dashboardBody() tag to override every instance where color = "aqua" with your custom blue:

tags$style(
  type = 'text/css', 
  '.bg-aqua {background-color: #005CB9!important; }'
),

The key is the "!important" after the color, which overrides the shinydashboard preset.

In the future, an easy way to identify css classes is to select "run external" in Rstudio when running your shinyapp, then use your browser's developer tools or "inspect element" tools.

Here's the full example for context:

require(shiny)
require(shinydashboard)

ui <- shinyUI(dashboardPage(
  dashboardHeader(title = 'Change infoBox color'),
  dashboardSidebar(disable = TRUE),

  dashboardBody(
    tags$style(
      type = 'text/css', 
      '.bg-aqua {background-color: #005CB9!important; }'
    ),

    infoBox(
      title = 'Custom Color',
      value = 100,
      color = 'aqua'
    )
  )
))

server <- shinyServer(function(input, output) {

})

shinyApp(ui, server)