Theme a shiny app

SISBID 2025
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.

05:00

Customizing Your Navbar

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

Adding Icons

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

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.

05:00

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

• Theming Shiny documentation
• Shiny Apps with bslib
• Unified Theming with brand.yml
• Professional Interface Development

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