Theme customization UI
A 'real-time' theme customization UI that you can use to easily make common
tweaks to Bootstrap variables and immediately see how they would affect your
app's appearance. There are two ways you can launch the theming UI. For most
Shiny apps, just use run_with_themer()
in place of shiny::runApp()
; they
should take the same arguments and work the same way. Alternatively, you can
call the bs_themer()
function from inside your server function (or in an R
Markdown app that is using runtime: shiny
, you can call this from any code
chunk). Note that this function is only intended to be used for development!
run_with_themer(appDir = getwd(), ..., gfonts = TRUE, gfonts_update = FALSE) bs_themer(gfonts = TRUE, gfonts_update = FALSE)
appDir |
The application to run. This can be a file or directory path,
or a |
... |
Additional parameters to pass through to |
gfonts |
whether or not to detect Google Fonts and wrap them in
|
gfonts_update |
whether or not to update the internal database of Google Fonts. |
To help you utilize the changes you see in the preview, this utility prints
bs_theme()
code to the R console.
nothing. These functions are called for their side-effects.
Currently, this utility only works with Bootstrap 4. We hope to add Bootstrap 3 compatibility in the future. Also, the color picker currently doesn't render correctly on IE11.
It also only works with Shiny apps and R Markdown apps that use the Shiny runtime. It's not possible to perform real-time preview for static R Markdown documents.
Note that only CSS generated with bs_dependency_defer()
will be
instantly reflected in theme preview.
library(shiny) # Initialize Bootstrap 4 with Bootstrap 3 compatibility shim theme <- bs_theme(version = 4, bg = "black", fg = "white") ui <- fluidPage( theme = theme, h1("Heading 1"), h2("Heading 2"), p( "Paragraph text;", tags$a(href = "https://www.rstudio.com", "a link") ), p( actionButton("cancel", "Cancel"), actionButton("continue", "Continue", class = "btn-primary") ), tabsetPanel( tabPanel("First tab", "The contents of the first tab" ), tabPanel("Second tab", "The contents of the second tab" ) ) ) if (interactive()) { run_with_themer(shinyApp(ui, function(input, output) {})) }
Please choose more modern alternatives, such as Google Chrome or Mozilla Firefox.