Shiny Themes

If you’ve created any shiny app in the past, you’re probably used to the default Bootstrap theme:

However, you can also easily alter the overall appearance of your Shiny application using the shinythemes package. Here are screenshots of the same application with different themes (click to enlarge):

cerulean

cosmo

cyborg

darkly

flatly

journal

lumen

paper

readable

sandstone

simplex

slate

spacelab

superhero

united

yeti

All the themes are from http://bootswatch.com/, and are MIT-licensed.

How to use it

shinythemes requires Shiny 0.11 or later. To install:

install.packages("shinythemes")

In your ui.R, use the theme argument to bootstrapPage, fluidPage, navbarPage, or fixedPage. The value should be shinytheme("<theme>"); for example, shinytheme("cerulean").

## ui.R ##
library(shinythemes)

fluidPage(theme = shinytheme("cerulean"),
  ...
)

Similarly, if you have a single-file app:

## app.R ##
library(shinythemes)

shinyApp(
  ui = fluidPage(theme = shinytheme("united"),
    ...
  ),
  server = function(input, output) { }
)

Live theme selector

If you want to quickly test out different themes with an application, you can simply add themeSelector() somewhere to the UI. This will add a select box which lets you choose the theme. It will change the theme without having to reload or restart your app. You can see the theme selector in action here.

The theme selector is only meant to be used while developing an application. Once you’ve decided on which theme to use, pass it to the theme argument as described earlier.

Here’s an example app with the theme selector:

shinyApp(
  ui = fluidPage(
    shinythemes::themeSelector(),  # <--- Add this somewhere in the UI
    sidebarPanel(
      textInput("txt", "Text input:", "text here"),
      sliderInput("slider", "Slider input:", 1, 100, 30),
      actionButton("action", "Button"),
      actionButton("action2", "Button2", class = "btn-primary")
    ),
    mainPanel(
      tabsetPanel(
        tabPanel("Tab 1"),
        tabPanel("Tab 2")
      )
    )
  ),
  server = function(input, output) {}
)

How it works

Bootstrap can use alternative CSS files in place of the stock bootstrap.css file. When the shinythemes package is loaded, it makes these alternate themes available to Shiny applications in a relative URL under shinythemes/.

The source code for shinythemes is available here.

How to use other Bootstrap themes

If you want to use a Bootstrap theme that isn’t included in shinythemes, you can include it in an app’s www/ subdirectory. The directory structure would be like this:

myapp
 |-- server.R
 |-- ui.R
 |-- www/
      |-- mytheme.css

Files in the www/ directory are automatically made available to your app. Your ui.R file would look like this:

fluidPage(
  theme = "mytheme.css",
  ...
)