Plots don't reflect bs_theme() 😭

fluidPage(
  theme = bs_theme(bg = "#002B36", fg = "#EEE8D5", primary = "#2AA198", base_fonts = "Pacifico"),
  tabsetPanel(type = "pills", tabPanel("ggplot", plotOutput("ggplot")), tabPanel("lattice", plotOutput("lattice")), tabPanel("base", plotOutput("base")))
)

{thematic} to the rescue! 🎉

thematic::thematic_shiny()
fluidPage(
  theme = bs_theme(bg = "#002B36", fg = "#EEE8D5", primary = "#2AA198", base_fonts = "Pacifico"),
  tabsetPanel(type = "pills", tabPanel("ggplot", plotOutput("ggplot")), tabPanel("lattice", plotOutput("lattice")), tabPanel("base", plotOutput("base")))
)

The {thematic} package, in general

• {thematic} alters R plotting defaults using a few simple settings. Use thematic_on() to enable globally (until thematic_off() is called).

library(thematic)
library(ggplot2)
thematic_on(
  bg = "black", 
  fg = "white", 
  accent = "red", 
  font = "Indie Flower"
)
ggplot(mtcars, aes(wt, mpg)) + 
  geom_point() + 
  geom_smooth()

The {thematic} package, in general

• {thematic} alters R plotting defaults using a few simple settings. Use thematic_on() to enable globally (until thematic_off() is called).

library(thematic)
library(ggplot2)
thematic_on(
  bg = "black", 
  fg = "white", 
  accent = "red", 
  font = "Indie Flower"
)
ggplot(mtcars, aes(wt, mpg)) + 
  geom_point() + 
  geom_smooth()

Real-time theming

# Includes `bs_themer()`, an interactive widget for real-time theming!
bs_theme_preview(bs_theme(bg = "#202123", fg = "#B8BCC2", primary = "#EA80FC", base_font = "Grandstander"))

More targetted theming

• The main colors and fonts "cascade" to 100s of other theming defaults
• Can also set more specific styles via Bootstrap Sass variables (e.g., $progress-bar-bg)

bs_theme(
  bg = "#002B36", fg = "#EEE8D5", 
  "progress-bar-bg" = "orange"
)

What's Sass? What's a Sass variable?

• Sass is a more powerful way to write CSS (i.e., style HTML)
• Sass variables provide "high-level controls" over CSS

• bs_theme() sets Bootstrap Sass variables (CSS compilation happens magically at run-time)

Learn more about Sass and the {sass} 📦 at https://rstudio.github.io/sass

Leverage the power of BS4 Utility Classes

Customize spacing, borders, modify colors, and more!

tabsetPanel(
  tabPanel("One", "No padding"),
  tabPanel("Two", "No padding")
)

tabsetPanel(
  tabPanel(
    "One", "With padding",
     class = "p-3 border border-top-0 rounded-bottom"
  ),
  tabPanel("Two", "No padding")
)

More generally, leverage the power of Sass

Add Sass rules to do things like @extend all navs to be centered

fluidPage(
  theme = bs_theme() %>%
    bs_add_rules(".nav { @extend .justify-content-center; }"),
  tabsetPanel(
    tabPanel("One", "Centered w/ padding", class = "p-3 border border-top-0 rounded-bottom"),
    tabPanel("Two", "No padding")
  )
)

Create custom, themable, components

• R Code
• Sass Code
• Result

person <- function(name, title, company) {
  div(
    class = "person",
    h3(class = "name", name),
    div(class = "title", title),
    div(class = "company", company)
  )
}
fluidPage(
  person("Andrew Carnegie", "Owner", "Carnegie Steel Company"),
  person("John D. Rockefeller", "Chairman", "Standard Oil"),
  theme = bs_theme(bg = "#002B36", fg = "#EEE8D5") %>%
     bs_add_rules(sass::sass_file("person.scss"))
)

.person {
  display: inline-block;
  padding: $spacer;
  border: $border-width solid $border-color;
  @include border-radius;
  @include box-shadow;
  outline: 0;
  width: 300px;
  @include media-breakpoint-down(sm) {
    display: block;
    width: auto;
    margin-right: $grid-gutter-width;
  }
  margin: $grid-gutter-width;
  margin-right: 0;
  .title { font-weight: bold; }
  .title, .company { color: $gray-600; }
}
.person:last-of-type {
  margin-right: $grid-gutter-width;
}

Dynamic theming in Shiny w/ setCurrentTheme()!

dark <- bs_theme(bg = "black", fg = "white")
light <- bs_theme()
ui <- fluidPage(
  theme = light, 
  checkboxInput("dark_mode", "Dark mode", FALSE)
)
server <- function(input, output, session) {
  observe(session$setCurrentTheme(
    if (input$dark_mode) dark else light
  ))
}
shinyApp(ui, server)

Very new and experimental (learn more)!

Use your theme inside R Markdown

Pass bs_theme() parameters to html_document() and html_document_base()¹ (we hope to extend this to other output formats as well).

--- 
output:
  html_document:
    theme:
      bg: "#202123"
      fg: "#B8BCC2"
      primary: "#EA80FC"
      base_font: "Grandstander"
---

Use your theme inside R Markdown

Customize the bs_theme() further with bs_global_*()

--- 
output:
  html_document:
    theme:
      bg: "#202123"
      fg: "#B8BCC2"
      primary: "#EA80FC"
      base_font: "Grandstander"
--- 
```{r, echo = FALSE}
library(bslib)
bs_global_add_rules(".nav { @extend .justify-content-center; }")
```