Theme for shiny

library(fresh)

{fresh} allow to customize themes to use with shiny::fluidPage or shiny::navbarPage. {shiny} use by default the theme from Bootstrap, {shinythemes} allow to use custom themes from Bootswatch. All these themes have default parameters (like colors) that {fresh} allow to edit.

Create a theme

Use function create_theme to create a new theme, first argument is the default template you want to modify, after that you can use functions bs_vars_* to edit variables of Bootstrap elements :

create_theme(
  theme = "default",
  bs_vars_button(
    default_color = "#FFF",
    default_bg = "#112446",
    default_border = "#112446",
    border_radius_base = "15px"
  ),
  bs_vars_wells(
    bg = "#FFF",
    border = "#112446"
  )
)

Here we modify shiny::actionButton appearance with bs_vars_button and appearance of shiny::sidebarPanel with bs_vars_wells.

Result looks like :

Use a theme

There’s two way to use a newly created theme :

  1. inline in the UI (useful to quickly visualize your theme)
  2. using a CSS file (recommended)

Inline

Don’t specify an output file and use rsult of create_theme() in use_theme() directly in your application :

File

When you create a theme, you can specify an output file :

Put the file my-custom-theme.css in the www/ folder of your application, and reference it like that in your UI :