bs_theme_new() creates a new (global) Bootstrap Sass theme which bootstrap() (or bootstrap_sass()) can consume (their theme argument defaults to bs_theme_get(), which get the current global theme). Once a global theme has been created, theme customization may be added via 'high-level' (e.g., bs_theme_base_colors()) and/or 'low-level' (e.g., bs_theme_add_variables()) customizations.

bs_theme_new(version = version_default(), bootswatch = NULL)






The major version of Bootstrap to use. A value of '4+3' means Bootstrap 4, but with additional CSS/JS to support BS3 style markup in BS4. Other supported versions include 3 and 4.


The name of a bootswatch theme. See bootswatch_themes() to list possible names.


a theme object (i.e., the return value of bs_theme_get()).


See also


# Themes are stored globally, and if there is no theme present, # bs_theme_get() returns NULL bs_theme_clear() bs_theme_get()
# Use latest Bootstrap version, default theme bs_theme_new() # When a theme is set, bs_theme_get() returns all the Sass code # necessary to compile Bootstrap, plus any theming customizations. class(bs_theme_get())
#> [1] "bs_theme" "sass_layer"
# Helpful if you want to know the Bootstrap version of the current theme theme_version()
#> [1] "4+3"
# Preview the current theme styling in a shiny app if (interactive()) bs_theme_preview() # Latest Bootstrap version, minty theme bs_theme_new(bootswatch = "minty") theme_bootswatch()
#> [1] "minty"
if (interactive()) bs_theme_preview() # Use Bootstrap 3 with theme customization bs_theme_new(3) bs_theme_base_colors(bg = "#444", fg = "#e4e4e4") bs_theme_accent_colors(primary = "#e39777") if (interactive()) bs_theme_preview(with_themer = FALSE) # Since themes are sass layers, you can work with them # locally as if they were any other Sass layer # (i.e. you don't have to modify global state to add theme customizations) bs_theme_new("4+3") theme <- sass::sass_layer_merge( bs_theme_get(), sass::sass_layer(defaults = list("primary" = "red !default")) ) bootstrap_sass( ".my-class { color: mix($primary, $secondary, 50%); }", theme )
#> /* CSS */ #> .my-class { #> color: #b63b3f; #> } #>