Theming Shiny Apps with bslib

Customize Shiny app appearance using bslib's Bootstrap 5 theming system. From quick Bootswatch themes to advanced Sass customization and dynamic color mode switching.

Quick Start

"shiny" preset (recommended starting point):

page_sidebar(
  theme = bs_theme(),  # "shiny" preset by default, polished, not plain Bootstrap
  ...
)

Bootswatch theme (for a different visual style):

page_sidebar(
  theme = bs_theme(preset = "zephyr"),  # or "cosmo", "minty", "darkly", etc.
  ...
)

Custom colors and fonts:

page_sidebar(
  theme = bs_theme(
    version = 5,
    bg = "#FFFFFF",
    fg = "#333333",
    primary = "#2c3e50",
    base_font = font_google("Lato"),
    heading_font = font_google("Montserrat")
  ),
  ...
)

Auto-brand from _brand.yml: If a _brand.yml file exists in your app or project directory, bs_theme() automatically discovers and applies it. No code changes needed. Requires the brand.yml R package.

bs_theme(brand = FALSE)    # Disable auto-discovery
bs_theme(brand = TRUE)     # Require _brand.yml (error if not found)
bs_theme(brand = "path/to/brand.yml")  # Explicit path

Theming Workflow

1. Start with the "shiny" preset (default) or a Bootswatch theme close to your desired look
2. Customize main colors (bg, fg, primary)
3. Adjust fonts with font_google() or other font helpers
4. Fine-tune with Bootstrap Sass variables via ... or bs_add_variables()
5. Add custom Sass rules with bs_add_rules() if needed
6. Enable thematic::thematic_shiny() so plots match the theme
7. Use bs_themer() during development for interactive preview

Example:

theme <- bs_theme(preset = "minty") |>
  bs_theme_update(
    primary = "#1a9a7f",
    base_font = font_google("Lato")
  ) |>
  bs_add_rules("
    .card { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
  ")

bs_theme()