Shiny Themes
Custom styling in Shiny.
-
Even if each of its component visualizations were beautifully designed, if we stick to using the default Shiny styling, it is hard to make our work look professional. In this set of notes, we’ll discuss how to customize the overall appearance of a Shiny app using the
bslib
library. We’ll work with the Old Faithful dataset. I’ve added some filler text to the bottom of the app so that we can see what effect alternative stylings will have on it.library(shiny) ui <- fluidPage( titlePanel("Old Faithful Geyser Data"), sidebarLayout( sidebarPanel( sliderInput("bins", "Number of bins:", min = 1, max = 50, value = 30) ), mainPanel( plotOutput("distPlot") ) ) ) server <- function(input, output) { output$distPlot <- renderPlot({ x <- faithful[, 2] bins <- seq(min(x), max(x), length.out = input$bins + 1) hist(x, breaks = bins, col = 'darkgray', border = 'white', xlab = 'Waiting time to next eruption (in mins)', main = 'Histogram of waiting times') }) } shinyApp(ui, server)
-
bslib
provides an R interface to bootstrap, which is a web library with pre-defined website themes. Each theme has been designed in such a way that its color palettes, font choices, and UI elements (e.g., the shape of buttons) work well together. -
The main function in this library is
bs_theme
. The simplest way to customize a page’s theme is to set thebootswatch
argument ofbs_theme
, which globally changes the theme to reflect one of a set of predefinedbootswatch
themes — you can see choices here.library(bslib) ui <- fluidPage( theme = bs_theme(bootswatch = "simplex"), titlePanel("Old Faithful Geyser Data"), ...
-
Sometimes we want finer-grained control than simply applying a
bootswatch
theme. Fortunately,bs_theme
also provides arguments that allow us to customize a variety of options. -
For example, if we want to change the background and foreground colors of our application, we can use the
bg
andfg
arguments. Note that I also passed in abg = NA
argument torenderPlot
, so that the plot was printed transparently, and not with a white background.ui <- fluidPage( theme = bs_theme( bootswatch = "simplex", fg = "#5DA668", bg = "#F2E9E9" ), ... output$distPlot <- renderPlot({ ... }, bg = NA)
-
Similarly, if we want to change the fonts used for headers, main text, and code, we can set the corresponding themer arguments. It’s possible to define fonts directly from font objects, but it’s usually easiest to use an existing link with Google fonts.
ui <- fluidPage( theme = bs_theme( bootswatch = "simplex", base_font = font_google("Combo"), heading_font = font_google("Rubik Moonrocks") ),
-
A nice trick is that we can customize the appearance of our site interactively by using the
bs_theme_preview()
function. It will open up our app with menus for modifying app appearance in real-time. Once we choose a styling that we like, we can retrieve the correspondingbs_theme()
arguments from the R console. -
Just to illustrate the power of bslib, here is an egregious application of bslib to create an NES-themed Shiny interface.