Theme a shiny app

SISBID 2026
https://github.com/dicook/SISBID

Theming your Shiny App

bslib has many options available for theming and customizing your app
We’ll cover the easily available options here
- Exponentially more powerful with CSS and a bit of tinkering

Preset Themes

Bootswatch provides preset themes
bs_themer() lets you choose interactively

Try it out in code/3.4-theme/bs_themer.R

default

flatly

darkly

Your Turn

Run the code in code/3.4-theme/bs_themer.R
Pick a theme you like.
Get the console output corresponding to that theme
modify bs_themed.R to use your theme code

Hint: Use the theme = ... argument in one of the page_xxx functions.

Customizing Your Navbar

You may want to add a logo to your title area
pictures should be placed in the www/ folder

title = div(
  img(src = "wave.gif", 
      width = "40px"),
  img(src = "globe.png", 
      width = "40px"),
  "Hello World", 
  style = "display: inline;"),

Adding Icons

You can add icons to your nav_panels() with the icon argument
- Bootstrap Icons
- Match the version of Bootstrap your app uses

nav_panel(
  title = "Dashboard", body, 
  icon = bs_icon("bar-chart", 
                 a11y = "deco") 
  # marks icon as decorative 
  # for screen readers
),

Your Turn

Customize the title and icons on the nav_panels in title_customization.R.

Choose appropriate icons and decide if they are decorative or semantic.

Change the width of the sidebar

side <- sidebar(
  width = "20%", h2("Inputs"), 
  sliderInput(
    "mpg", label = "MPG range", step = 1, value = range(mtcars$mpg)
    min = min(floor(mtcars$mpg), na.rm = T), max = max(ceiling(mtcars$mpg), na.rm = T),
))

10%

20%

100px

100px ( mode)

Resources

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.