Learn R Programming

bootstraplib (version 0.1.0.9000)

bs_theme_quick: Customize the Bootstrap theme based on two to four key colors

Description

bs_theme_quick generates a complete Bootstrap theme from just a small handful of user-specified colors: a background color, a foreground color, and optionally, an accent color.

Usage

bs_theme_quick(bg = "#FFFFFF", fg = "#000000", accent = NULL, secondary = NULL)

Arguments

bg

A color string for the background, in any format htmltools::parseCssColors() can understand.

fg

A color string for the background.

accent

A color string for the accent color; if not NULL, this will be assigned to the $primary (BS4) or $brand-primary (BS3) Sass variables.

secondary

A color string for the secondary color; if not NULL, this will be assigned to the $secondary and $default Bootstrap 4 Sass variables. (This argument is not currently supported for Bootstrap 3.)

Implementation notes

bs_theme_quick supports both Bootstrap 3 and 4 (and 4+3), but the implementation differs greatly.

For Bootstrap 4, the vast majority of default colors are directly or indirectly based on the $black, $white, and $gray-100 through $gray-900 variables; or on the theme colors (primary, secondary, danger, warning, info, etc.). bs_theme_quick sets $white to the bg color, $black to the fg color, and interpolates the grays between them. If provided, the accent argument is used to set the $primary variable, and the secondary argument is used to set $secondary and $default variables.

For Bootstrap 3, a similar set of $black, $white, and $gray-darker through $gray-lighter variables exist, and these are populated using the same strategy as with Bootstrap 4. However, unlike Bootstrap 4, in Bootstrap 3 many of the default colors are hard-coded hex colors, that also happen to be shades of gray. bs_theme_quick overrides these hard-coded values with colors interpolated between bg and fg.

Examples

Run this code
# NOT RUN {
bs_theme_new("4+3")
bs_theme_quick(bg = "#000060", fg = "skyblue",
  accent = "orange", secondary = "silver")

# You can apply further customizations here if desired, e.g.:
bs_theme_add_variables("success" = "#1D7732")

if (interactive()) {
  bs_theme_preview()
}

# }

Run the code above in your browser using DataLab