EVOLUTION-MANAGER
Edit File: bs_theme.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>R: Create a Bootstrap theme</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="R.css" /> </head><body> <table width="100%" summary="page for bs_theme {bslib}"><tr><td>bs_theme {bslib}</td><td style="text-align: right;">R Documentation</td></tr></table> <h2>Create a Bootstrap theme</h2> <h3>Description</h3> <p>Creates a Bootstrap theme object, where you can: </p> <ul> <li><p> Choose a (major) Bootstrap <code>version</code>. </p> </li> <li><p> Choose a <a href="https://bootswatch.com">Bootswatch theme</a> (optional). </p> </li> <li><p> Customize main colors and fonts via explicitly named arguments (e.g., <code>bg</code>, <code>fg</code>, <code>primary</code>, etc). </p> </li> <li><p> Customize other, lower-level, Bootstrap Sass variable defaults via <code>...</code>. </p> </li></ul> <p>To learn more about how to implement custom themes, as well as how to use them inside Shiny and R Markdown, <a href="https://rstudio.github.io/bslib/articles/bslib.html">see here</a>. </p> <h3>Usage</h3> <pre> 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, font_scale = 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, font_scale = NULL ) is_bs_theme(x) </pre> <h3>Arguments</h3> <table summary="R argblock"> <tr valign="top"><td><code>version</code></td> <td> <p>The major version of Bootstrap to use (see <code><a href="versions.html">versions()</a></code> for possible values). Defaults to the currently recommended version for new projects (currently Bootstrap 5).</p> </td></tr> <tr valign="top"><td><code>bootswatch</code></td> <td> <p>The name of a bootswatch theme (see <code><a href="bootswatch_themes.html">bootswatch_themes()</a></code> for possible values). When provided to <code>bs_theme_update()</code>, any previous Bootswatch theme is first removed before the new one is applied (use <code>bootswatch = "default"</code> to effectively remove the Bootswatch theme).</p> </td></tr> <tr valign="top"><td><code>...</code></td> <td> <p>arguments passed along to <code><a href="bs_bundle.html">bs_add_variables()</a></code>.</p> </td></tr> <tr valign="top"><td><code>bg</code></td> <td> <p>A color string for the background.</p> </td></tr> <tr valign="top"><td><code>fg</code></td> <td> <p>A color string for the foreground.</p> </td></tr> <tr valign="top"><td><code>primary</code></td> <td> <p>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.</p> </td></tr> <tr valign="top"><td><code>secondary</code></td> <td> <p>A color for components and messages that don't need to stand out. (Not supported in Bootstrap 3.)</p> </td></tr> <tr valign="top"><td><code>success</code></td> <td> <p>A color for messages that indicate an operation has succeeded. Typically green.</p> </td></tr> <tr valign="top"><td><code>info</code></td> <td> <p>A color for messages that are informative but not critical. Typically a shade of blue-green.</p> </td></tr> <tr valign="top"><td><code>warning</code></td> <td> <p>A color for warning messages. Typically yellow.</p> </td></tr> <tr valign="top"><td><code>danger</code></td> <td> <p>A color for errors. Typically red.</p> </td></tr> <tr valign="top"><td><code>base_font</code></td> <td> <p>The default typeface.</p> </td></tr> <tr valign="top"><td><code>code_font</code></td> <td> <p>The typeface to be used for code. Be sure this is monospace!</p> </td></tr> <tr valign="top"><td><code>heading_font</code></td> <td> <p>The typeface to be used for heading elements.</p> </td></tr> <tr valign="top"><td><code>font_scale</code></td> <td> <p>A scalar multiplier to apply to the base font size. For example, a value of <code>1.5</code> scales font sizes to 150% and a value of <code>0.8</code> scales to 80%. Must be a positive number.</p> </td></tr> <tr valign="top"><td><code>theme</code></td> <td> <p>a <code><a href="bs_theme.html">bs_theme()</a></code> object.</p> </td></tr> <tr valign="top"><td><code>x</code></td> <td> <p>an object.</p> </td></tr> </table> <h3>Value</h3> <p>a <code><a href="../../sass/html/sass_layer.html">sass::sass_bundle()</a></code> (list-like) object. </p> <h3>Colors</h3> <p>Colors may be provided in any format that <code><a href="../../htmltools/html/parseCssColors.html">htmltools::parseCssColors()</a></code> can understand. To control the vast majority of the ('grayscale') color defaults, specify both the <code>fg</code> (foreground) and <code>bg</code> (background) colors. The <code>primary</code> and <code>secondary</code> theme colors are also useful for accenting the main grayscale colors in things like hyperlinks, tabset panels, and buttons. </p> <h3>Fonts</h3> <p>Use <code>base_font</code>, <code>code_font</code>, and <code>heading_font</code> to control the main typefaces. These arguments set new defaults for the relevant <code>font-family</code> CSS properties, but don't necessarily import the relevant font files. To both set CSS properties <em>and</em> import font files, consider using the various <code><a href="font_face.html">font_face()</a></code> helpers. </p> <p>Each <code style="white-space: pre;">*_font</code> argument may be collection of character vectors, <code><a href="font_face.html">font_google()</a></code>s, <code><a href="font_face.html">font_link()</a></code>s and/or <code><a href="font_face.html">font_face()</a></code>s. Note that a character vector can have: </p> <ul> <li><p> A single unquoted name (e.g., <code>"Source Sans Pro"</code>). </p> </li> <li><p> A single quoted name (e.g., <code>"'Source Sans Pro'"</code>). </p> </li> <li><p> A comma-separated list of names w/ individual names quoted as necessary. (e.g. <code>c("Open Sans", "'Source Sans Pro'", "'Helvetica Neue', Helvetica, sans-serif")</code>) </p> </li></ul> <p>Since <code>font_google(..., local = TRUE)</code> guarantees that the client has access to the font family, meaning it's relatively safe to specify just one font family, for instance: </p> <div class="sourceCode"><pre>bs_theme(base_font = font_google("Pacifico", local = TRUE)) </pre></div> <p>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. </p> <div class="sourceCode"><pre>bs_theme(base_font = font_collection(font_google("Pacifico", local = FALSE), "Roboto", "sans-serif")) </pre></div> <h3>References</h3> <p><a href="https://rstudio.github.io/bslib/articles/bslib.html">https://rstudio.github.io/bslib/articles/bslib.html</a> </p> <p><a href="https://rstudio.github.io/sass/">https://rstudio.github.io/sass/</a> </p> <h3>See Also</h3> <p><code><a href="bs_bundle.html">bs_add_variables()</a></code>, <code><a href="bs_theme_preview.html">bs_theme_preview()</a></code> </p> <h3>Examples</h3> <pre> 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 <- bs_add_variables(theme, "my-class-color" = "red") theme <- bs_add_rules(theme, ".my-class { color: $my-class-color }") </pre> <hr /><div style="text-align: center;">[Package <em>bslib</em> version 0.4.0 <a href="00Index.html">Index</a>]</div> </body></html>