Use bs_add_variables() to add Bootstrap Sass variable defaults, bs_add_rules() to add additional Sass rules, and bs_add_declarations() to add Sass functions and mixins. Compared to higher-level theme customization available in bs_theme(), these functions are a more direct interface to Bootstrap Sass, and therefore, do nothing to ensure theme customizations are portable between major Bootstrap versions.

bs_add_variables(
  theme,
  ...,
  .where = "defaults",
  .default_flag = identical(.where, "defaults")
)

bs_add_rules(theme, rules)

bs_add_declarations(theme, declarations)

bs_add_layers(theme, ...)

Arguments

theme

a bs_theme() object.

...

For bs_add_variables(), these arguments should contain Sass variables; otherwise, these arguments should contain sass::sass_layer()s.

.where

whether to place the variable definitions before other Sass "defaults", after other Sass "declarations", or after other Sass "rules".

.default_flag

whether or not to add a !default flag (if missing) to variable expressions. It's recommended to keep this as TRUE when .where = "defaults".

rules

Sass rules.

declarations

Sass functions and mixins.

References

https://getbootstrap.com/docs/4.4/getting-started/theming/

https://rstudio.github.io/sass/articles/sass.html#layering

Examples

# Function to preview the styling a (primary) Bootstrap button library(htmltools) button <- tags$a(class = "btn btn-primary", href = "#", role = "button", "Hello") preview_button <- function(theme) { browsable(tags$body(bs_theme_dependencies(theme), button)) } # Here we start with a theme based on a Bootswatch theme, # then override some variable defaults theme <- bs_theme(bootswatch = "sketchy", primary = "orange") %>% bs_add_variables( "body-bg" = "#EEEEEE", "font-family-base" = "monospace", "font-size-base" = "1.4rem", "btn-padding-y" = ".16rem", "btn-padding-x" = "2rem" ) preview_button(theme) # If you need to set a variable based on another Bootstrap variable theme %>% bs_add_variables("body-color" = "$success", .where = "declarations") %>% preview_button() # Start a new global theme and add some custom rules that # use Bootstrap variables to define a custom styling for a # 'person card' person_rules <- system.file("custom", "person.scss", package = "bootstraplib") theme <- bs_theme() %>% bs_add_rules(sass::sass_file(person_rules)) # Include custom CSS that leverages bootstrap Sass variables person <- function(name, title, company) { tags$div( class = "person", h3(class = "name", name), div(class = "title", title), div(class = "company", company) ) } browsable(shiny::fluidPage( theme = theme, person("Andrew Carnegie", "Owner", "Carnegie Steel Company"), person("John D. Rockefeller", "Chairman", "Standard Oil") ))