Shiny dashboard with yellow sidebar

app.R

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(),
  tags$head(tags$style(HTML("
    .skin-blue .main-sidebar {
        background-color:  yellow;
                            }")))
)

server <- function(input, output) { }

shinyApp(ui, server)

Thanks for this, @homerhanumat.

Do you know why the above chunk of codes does not work when changing the header color?

u <- dashboardPage(skin = "red",
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(),
  tags$head(
    tags$style(HTML(".skin-blue .main-sidebar {background-color:  yellow;}"))
  )
)

s <- function(input, output) { }

shinyApp(u, s)

@Fahim-Ahmad, the default skin for shinydashboard is blue, so when no skin is specied in the R code, the <aside> tag that constitutes the sidebar gets CSS classes that include "skin-blue". So when you add your custom styling, you need to specify .skin-blue in the CSS rule.

If you change the theme to red then the <aside> tag inherits class "skin-red", so the custom styling rule no longer applies to it.

The fix is simple, just modify the custom styling:

u <- dashboardPage(skin = "red",
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(),
  tags$head(
    tags$style(HTML(".skin-red .main-sidebar {background-color:  yellow;}"))
  )
)

s <- function(input, output) { }

shinyApp(u, s)

In my code I specified the .skin-* class in the custom styling, so that my rule for background-color would over-ride the CSS rules provided by shinydashboard. Another solution would be to use !important, like this:

u <- dashboardPage(skin = "red",
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(),
  tags$head(
    tags$style(HTML(".main-sidebar {background-color:  yellow !important;}"))
  )
)

s <- function(input, output) { }

shinyApp(u, s)

Thank you a lot!

I didn't know about !important. It is excellent.