Applying bslib to sidebar panel shiny

[ruth1]

I'm trying to customise the sidebar panel of my shiny app, and not sure what the easiest way of doing it is. I like the presentation of apps using bslib, but I need to be able to have a particular background colour on the sidebar panel (for inputs), while keeping the rest of the app's background white. Below is a code which shows the sort of customisation I would want on the sidebar panel, but I would just want the rest of the app background to be white.

ui <-fluidPage(
  
  theme = bs_theme(
    bg = "#353d42", fg = "white", primary = "#FCC780"),
  
  
  
  # Generate a row with a sidebar
  sidebarLayout(   
    sidebarPanel(
      
      selectInput("n_breaks", label = "Number of bins:",
                  choices = c(10, 20, 35, 50), selected = 20),
      
      sliderInput("bw_adjust", label = "Bandwidth adjustment:",
                  min = 0.2, max = 2, value = 1, step = 0.2)
      
    ),
    
    # Create a spot for the barplot
    mainPanel(id="main",
              plotOutput("plot")  
    )
    
  ))

server <- function(input, output) {
  
  
  
  output$plot <- renderPlot({ 
    hist(faithful$eruptions, probability = TRUE, breaks = as.numeric(input$n_breaks),
         xlab = "Duration (minutes)", main = "Geyser eruption duration")
    
    dens <- density(faithful$eruptions, adjust = input$bw_adjust)
    lines(dens, col = "blue")
    
    
  })
}

shinyApp(ui=ui, server=server)

[veronix]

There are many ways to customize it depending on your level of experience with HTML and CSS.

There may be better methods out there, but the simplest way I could think of is setting the bslib theme's background to white for your app, and then "targeting" the input panel specifically to overwrite that background color setting to your custom (#353D42 color) background. However, you may need to do more manual customization, depending on what input selections you have. But here's the general idea in the modified reprex:

library(bslib) 
ui <-fluidPage(
    
    theme = bs_theme(
        bg = "white", fg = "white", primary = "#FCC780"),
    
    # target sidebarPanel's input selection ("well") background color specifically, 
    # overriding theme's default background color for body with !important
    tags$style(' .well  { background-color: #353D42 !important;}'),
    

    # Generate a row with a sidebar
    sidebarLayout(   
        
        sidebarPanel(
            
            
            
            
            selectInput("n_breaks", label = "Number of bins:",
                        choices = c(10, 20, 35, 50), selected = 20),
            
            sliderInput("bw_adjust", label = "Bandwidth adjustment:",
                        min = 0.2, max = 2, value = 1, step = 0.2)
            
        ),
        
        # Create a spot for the barplot
        mainPanel(id="main",
                  plotOutput("plot")  
        )
        
    ))

server <- function(input, output) {
    
    
    
    output$plot <- renderPlot({ 
        hist(faithful$eruptions, probability = TRUE, breaks = as.numeric(input$n_breaks),
             xlab = "Duration (minutes)", main = "Geyser eruption duration")
        
        dens <- density(faithful$eruptions, adjust = input$bw_adjust)
        lines(dens, col = "blue")
        
        
    })
}

shinyApp(ui=ui, server=server)