rshinybslib

Why is my bslib Bootswatch theme not applied across every element?


I am creating an R Shiny dashboard using the bslib package and am encountering issues with the bs_theme I choose (in this case the Flatly theme: https://bootswatch.com/flatly/) not applying its theme styles across every element. For example, when I run the following code:

library(bslib)
library(shiny)

ui <- page_navbar(
  theme = bs_theme(bootswatch = "flatly", version = 5),
  title = "Test Dashboard",
  
  nav_panel(title = "Analysis",
            page_sidebar(
              sidebar = sidebar(
                selectizeInput("input1", label = "Example Input 1", choices = c("Yes", "No"), selected = "Yes"),
                selectInput("input2", label = "Example Input 2", choices = c("Yes", "No"), selected = "Yes")
              )
            )
  )
)

server <- function(input, output, session){
  bs_themer()
}

shinyApp(ui = ui, server = server)

I get the following dashboard:

example dashboard

The sidebar panel nor the select input dropdown hover is colored how I would expect when using the flatly theme. Interestingly, when I customize the theme using the bs_themer() command, the selected theme doesn't default to flatly and when I change it to flatly in the Preset Theme box, the styles get applied and work as expected. From my testing, this behavior is the same for other bootswatch themes. I have been examining the following docs but have not found any reason for this behaviour:

https://shiny.posit.co/r/getstarted/build-an-app/customizing-ui/theming.html https://rstudio.github.io/bslib/articles/theming/index.html

I have also tried using the shinythemes package but this doesn't work with bslib and I would like to use bslib functionality. While I could apply these custom stylings manually using CSS, this would take quite some time as I am transitioning a large number of dashboards to this theme.


Solution

  • The issue is that inside the page_navbar() you have a page_sidebar() and the latter one defines the sidebar on "page-level" what makes it not inherit the theme from the page_navbar().

    Instead, bslib has layout_sidebar() what is applicable here. From the docs:

    layout_sidebar() creates a "floating" sidebar layout component which can be used inside any page() and/or card() context.

    library(bslib)
    library(shiny)
    
    ui <- page_navbar(
      theme = bs_theme("flatly", version = 5),
      title = "Test Dashboard",
      nav_panel(title = "Analysis",
                layout_sidebar(
                  sidebar = sidebar(
                    selectizeInput("input1", label = "Example Input 1", choices = c("Yes", "No"), selected = "Yes"),
                    selectInput("input2", label = "Example Input 2", choices = c("Yes", "No"), selected = "Yes")
                  )
                )
      )
    )
    
    shinyApp(ui = ui, \(...) {})
    

    enter image description here