R Shiny box content background color

Question

I am trying to change the background content colour of my box from white to #222d32 (or any custom colour), however when using the background parameter I get the error

Error in validateColor(background): Invalid color: #222d32. Valid colors are: red, yellow, aqua, blue, light-blue, green, navy, teal, olive, lime, orange, fuchsia, purple, maroon, black.

Code below:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
        fluidRow(
            box(width = 6, title = "test", status = "primary", solidHeader = TRUE, background = '#222d32',
                "Box content"
            )
        )
    )
)


server <- function(input, output) {}

shinyApp(ui, server)

I have also tried to create a custom wrapper to catch the <div> and modify it, however was not successful. Code below:

library(shiny)
library(shinydashboard)

box_customBackground <- function(box_object, color = NULL){

    new_color_class <- paste0('<div class="box box-solid ', color ,'">')

    box_modify <- gsub('<div class="box">', new_color_class, box_object)

    box_html <- HTML(box_modify)

    return(box_html)
}


ui <- dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
        fluidRow(
            box_customBackground(box_object  =  box(
                actionButton(inputId = 'SelectGroup', label = 'Change Groups'),
                checkboxGroupInput(inputId = 'SimulationType', choices = c('Growth', 'Step'), selected = 'Growth',
                                   label = NULL, inline = TRUE),
                width = 5), color = '#222d32'
            )
        )
    )
)


server <- function(input, output) {}

shinyApp(ui, server)

Winicius Sabino Winicius Sabino · Accepted Answer · 2018-02-03T21:12:41

if you want to change only the background of the box content, do this:

library(shiny) 
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$style(HTML("


                .box.box-solid.box-primary>.box-header {

                }

                .box.box-solid.box-primary{

                background:#222d32
                }

                ")),
    fluidRow(
      box(width = 6, title = "test", status = "primary", solidHeader 
         = TRUE,
          "Box content"
      )
    )
    )
  )


server <- function(input, output) {}

shinyApp(ui, server)

if you want to change everything in the box do this:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$style(HTML("

                    .box.box-solid.box-primary>.box-header {
                    color:#fff;
                    background:#222d32
                    }

                    .box.box-solid.box-primary{
                    border-bottom-color:#222d32;
                    border-left-color:#222d32;
                    border-right-color:#222d32;
                    border-top-color:#222d32;
                    background:#222d32
                    }

                    ")),
    fluidRow(
      box(width = 6, title = "test", status = "primary", solidHeader = 
        TRUE,
         "Box content"
      )
    )
    )
  )


server <- function(input, output) {}

shinyApp(ui, server)

R Shiny box content background color

1 Answers