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: /) 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:

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:

.html .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.

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:

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.

• r
• shiny
• bslib

1 Answer 1

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, \(...) {})