Create a Bootstrap theme
Creates a Bootstrap theme object which can be:
Used in any HTML page powered by shiny::bootstrapLib() (e.g.,
shiny::fluidPage(), shiny::bootstrapPage(), etc).
Used in any output format powered by rmarkdown::html_document()
(or rmarkdown::html_document_base()).
Used more generally in any htmltools::tags via bs_theme_dependencies().
These functions (i.e., bs_theme() or bs_theme_update()) allow you to do
the following common Bootstrap customization(s):
Choose a (major) Bootstrap version.
Choose a Bootswatch theme (optional).
Customize main colors and fonts via explicitly named arguments (e.g.,
bg, fg, primary, etc).
Customize other, lower-level, Bootstrap Sass variable defaults via ...
See all Bootstrap 4 variables
See all Bootstrap 3 variables
For less common theming customization(s), you can modify theme objects to:
Add additional Sass/CSS rules (see bs_add_rules() and sass_partial()).
Leverage (new) Sass functions and mixins in those rules (see
bs_add_declarations())
These lower-level theming tools build on the concept of a
sass::sass_layer(). To learn more, see here.
bs_theme( version = version_default(), bootswatch = NULL, ..., bg = NULL, fg = NULL, primary = NULL, secondary = NULL, success = NULL, info = NULL, warning = NULL, danger = NULL, base_font = NULL, code_font = NULL, heading_font = NULL ) bs_theme_update( theme, ..., bootswatch = NULL, bg = NULL, fg = NULL, primary = NULL, secondary = NULL, success = NULL, info = NULL, warning = NULL, danger = NULL, base_font = NULL, code_font = NULL, heading_font = NULL ) is_bs_theme(x)
version |
The major version of Bootstrap to use (see |
bootswatch |
The name of a bootswatch theme (see |
... |
arguments passed along to |
bg |
A color string for the background. |
fg |
A color string for the foreground. |
primary |
A color to be used for hyperlinks, to indicate primary/default actions, and to show active selection state in some Bootstrap components. Generally a bold, saturated color that contrasts with the theme's base colors. |
secondary |
A color for components and messages that don't need to stand out. (Not supported in Bootstrap 3.) |
success |
A color for messages that indicate an operation has succeeded. Typically green. |
info |
A color for messages that are informative but not critical. Typically a shade of blue-green. |
warning |
A color for warning messages. Typically yellow. |
danger |
A color for errors. Typically red. |
base_font |
The default typeface. |
code_font |
The typeface to be used for code. Be sure this is monospace! |
heading_font |
The typeface to be used for heading elements. |
theme |
a |
x |
an object. |
a sass::sass_bundle() (list-like) object.
Colors may be provided in any format that htmltools::parseCssColors() can
understand. To control the vast majority of the ('grayscale') color
defaults, specify both the fg (foreground) and bg (background) colors.
The primary and secondary theme colors are also useful for accenting the
main grayscale colors in things like hyperlinks, tabset panels, and buttons.
Use base_font, code_font, and heading_font to control the main
typefaces. These arguments set new defaults for the relevant font-family
CSS properties, but don't necessarily import the relevant font files. To
both set CSS properties and import font files, consider using the various
font_face() helpers.
Each *_font argument may be collection of character vectors,
font_google()s, font_link()s and/or font_face()s. Note that a
character vector can have:
A single unquoted name (e.g., "Source Sans Pro").
A single quoted name (e.g., "'Source Sans Pro'").
A comma-separated list of names w/ individual names quoted as necessary.
(e.g. c("Open Sans", "'Source Sans Pro'", "'Helvetica Neue', Helvetica, sans-serif"))
Since font_google(..., local = TRUE) guarantees that the client has access to
the font family, meaning it's relatively safe to specify just one font
family, for instance:
bs_theme(base_font = font_google("Pacifico", local = TRUE))However, specifying multiple "fallback" font families is recommended, especially when relying on remote and/or system fonts being available, for instance. Fallback fonts are useful not only for handling missing fonts, but also for handling a Flash of Invisible Text (FOIT) which can be quite noticeable with remote web fonts on a slow internet connection.
bs_theme(base_font = list(font_google("Pacifico", local = FALSE), "Roboto", "sans-serif")theme <- bs_theme(
# Controls the default grayscale palette
bg = "#202123", fg = "#B8BCC2",
# Controls the accent (e.g., hyperlink, button, etc) colors
primary = "#EA80FC", secondary = "#48DAC6",
base_font = c("Grandstander", "sans-serif"),
code_font = c("Courier", "monospace"),
heading_font = "'Helvetica Neue', Helvetica, sans-serif",
# Can also add lower-level customization
"input-border-color" = "#EA80FC"
)
if (interactive()) {
bs_theme_preview(theme)
}
# Lower-level bs_add_*() functions allow you to work more
# directly with the underlying Sass code
theme <- theme %>%
bs_add_variables("my-class-color" = "red") %>%
bs_add_rules(".my-class { color: $my-class-color }")Please choose more modern alternatives, such as Google Chrome or Mozilla Firefox.