{fresh} allow to create custom themes to use in {shiny} applications, currently you can create themes to use with:
shiny::fluidPage
or shiny::navbarPage
or themes from Bootswatch
Use function create_theme
to create a new theme, this function accept variables to set specific parameters of the theme. There’s 3 type of variables depending on which framework you use:
bs_vars_*
to create a shiny themeadminlte_*
to create a shinydashboard themebs4dash_*
to create a bs4Dash themeWhen using bs_vars_*
, you can specify theme
argument to use a Bootswatch template.
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 :
There’s two way to use a newly created theme :
Don’t specify an output file and use result of create_theme()
in use_theme()
directly in your application :
mytheme <- create_theme( theme = "default", bs_vars_navbar( default_bg = "#75b8d1", default_color = "#FFFFFF", default_link_color = "#FFFFFF", default_link_active_color = "#75b8d1", default_link_active_bg = "#FFFFFF", default_link_hover_color = "firebrick" ), output_file = NULL ) navbarPage( title = "Custom navbar", header = tagList( use_theme(mytheme) # <-- use your theme ), tabPanel("Tab 1"), tabPanel("Tab 2") )
When you create a theme, you can specify an output file :
create_theme( theme = "default", ..., output_file = "my-custom-theme.css" )
Put the file my-custom-theme.css
in the www/
folder of your application, and reference it like that in your UI’s fluidPage
or navbarPage
:
fluidPage( theme = "my-custom-theme.css", # ... ) # or if using a navbar page navbarPage( title = "My application", theme = "mytheme.css", # ... )
In {shinydashboard} or {bs4Dash}, you can use use_theme()
with a path inside dashboardBody
or bs4DashBody
:
dashboardBody( use_theme("path/to/theme.css") ) bs4DashBody( use_theme("path/to/theme.css") )
Note that the path must be in the www/
folder of your application.