Styling Shiny & R Markdown with bslib & thematic

class: middle, center

# Styling Shiny & R Markdown with bslib & thematic

### Carson Sievert, Software Engineer @ RStudio

### Slides: https://bit.ly/noRth2020

[@cpsievert](https://twitter.com/cpsievert)

[@cpsievert](https://github.com/cpsievert)

[cpsievert.me](https://cpsievert.me)

<cpsievert1@gmail.com>

---
class: contrast, large

## New tools for styling Shiny & R Markdown

__bslib__: tools for styling HTML from R (e.g., Shiny apps, `rmarkdown::html_document()`, etc)

```r
remotes::install_github("rstudio/bslib")
```

__thematic__: simplified theming of R plots (e.g., **ggplot2**, **lattice**, **base**)

```r
remotes::install_github("rstudio/thematic")
```

.footnote[
Documentation:

<https://rstudio.github.io/bslib> 
<https://rstudio.github.io/thematic>
]

---
class: contrast

## Running code examples

#### WARNING: much of this is a work-in-progress and may change!

On RStudio Cloud (<https://bit.ly/thematic-cloud>)

Or, locally

```r
library(remotes)
install_github("rstudio/shiny@demo/bslib")
install_github("rstudio/rmarkdown#1706")
install_github("rstudio/DT@sass")
install_github("ropensci/plotly")
install.packages(c('shinythemes', 'ggplot2', 'lattice'))
```

---
class: large

## Approaches to styling Shiny & R Markdown

1. __I'm just happy it works__ (accept the defaults)
2. __I want a different 'pre-packaged' look__ (**shinythemes**)
3. __I want specific fonts/colors/styles__ (custom CSS)

---
class: large

## Approaches to styling Shiny & R Markdown

1. [__I'm just happy it works__ (accept the defaults)](#6)
2. __I want a different 'pre-packaged' look__ (**shinythemes**)
3. __I want specific fonts/colors/styles__ (custom CSS)

---
class: contrast

### Example app with default styling

.panelset[

.panel[.panel-name[Code]
```r
library(shiny)
ui <- navbarPage("Theming demo app", ...)
```

Imagine the `...` has a bunch of shiny UI (e.g., `selectInput()`, `sliderInput()`, `wellPanel()`, etc)
]

.panel[.panel-name[Result]

![](default.png)

]

---
class: large

## Approaches to styling Shiny & R Markdown

1. __I'm just happy it works__ (accept the defaults)
2. [__I want a different 'pre-packaged' look__ (**shinythemes**)](#8)
3. __I want specific fonts/colors/styles__ (custom CSS)

---
class: contrast

### Flatly theme

.panelset[

.panel[.panel-name[Code]

<code class ='r hljs remark-code'>library(shiny) ui <- navbarPage( &nbsp;&nbsp;"Theming demo app", ..., &nbsp;&nbsp;theme = shinythemes::shinytheme("flatly") )</code>
]

.panel[.panel-name[Result]

![](flatly.png)

]
]

---
class: contrast

### Darkly theme

.panelset[

.panel[.panel-name[Code]

]

.panel[.panel-name[Result]

![](darkly.png)

]
]

---
class: contrast

### Superhero theme

.panelset[

.panel[.panel-name[Code]

]

.panel[.panel-name[Result]

![](superhero.png)

]

---
class: large

## Approaches to styling Shiny & R Markdown

1. __I'm just happy it works__ (accept the defaults)
2. __I want a different 'pre-packaged' look__ (**shinythemes**)
3. [__I want specific fonts/colors/styles__  (custom CSS)](#12)
  * Writing custom CSS to override styles is tedious and error prone!
  
.footnote[
See also Joe Cheng's [recent rstudio::conf talk](https://rstudio.com/resources/rstudioconf-2020/styling-shiny-apps-with-sass-and-bootstrap-4/)
]

---
class: large

## Approaches to styling Shiny & R Markdown

1. __I'm just happy it works__ (accept the defaults)
2. __I want a different 'pre-packaged' look__ (**shinythemes**)
3. [__I want specific fonts/colors/styles__  (custom CSS)](#12)
  * Writing custom CSS to override styles is tedious and error prone!
  * Instead, use __bslib__ to customize Bootstrap CSS using simple R functions.

.footnote[
See also Joe Cheng's [recent rstudio::conf talk](https://rstudio.com/resources/rstudioconf-2020/styling-shiny-apps-with-sass-and-bootstrap-4/)
]

---
class: contrast

### To use bslib with shiny, do:

.panelset[

.panel[.panel-name[Code]

<code class ='r hljs remark-code'>library(shiny) library(bslib) shinyOptions(bslib = TRUE) bs_theme_new() ui <- navbarPage("Theming demo app", ...)</code>

This'll upgrade Bootstrap (the underlying CSS framework) from 3 to 4
]

.panel[.panel-name[Bootstrap 3]

<code class ='r hljs remark-code'>library(shiny) library(bslib) shinyOptions(bslib = TRUE) bs_theme_new(version = 3) ui <- navbarPage("Theming demo app", ...)</code>

If, for some reason, you still want Bootstrap 3 (shiny's current default)
]

.panel[.panel-name[Result]

![](default.png)

]
]

---
class: contrast

### Like shinythemes, can specify a 'pre-packaged' theme

.panelset[

.panel[.panel-name[Code]

<code class ='r hljs remark-code'>library(shiny) library(bslib) shinyOptions(bslib = TRUE) bs_theme_new(bootswatch = "solar") ui <- navbarPage("Theming demo app", ...)</code>

Meaning you can use a Bootstrap 4 only theme (e.g., solar, [sketchy](https://bootswatch.com/sketchy), [minty](https://bootswatch.com/minty), etc)

]

.panel[.panel-name[Result]

![](solar.png)

]

---
class: contrast

### Customize the main colors

.panelset[

.panel[.panel-name[Code]

<code class ='r hljs remark-code'>library(shiny) library(bslib) shinyOptions(bslib = TRUE) bs_theme_new() bs_theme_base_colors(bg = "#002B36", fg = "#EEE8D5") bs_theme_accent_colors(primary = "#2AA198") ui <- navbarPage("Theming demo app", ...)</code>

]

.panel[.panel-name[Result]

![](custom.png)

]

---
class: contrast

### Customize the fonts

.panelset[

.panel[.panel-name[Code]

<code class ='r hljs remark-code'>library(shiny) library(bslib) shinyOptions(bslib = TRUE) bs_theme_new() bs_theme_base_colors(bg = "#002B36", fg = "#EEE8D5") bs_theme_accent_colors(primary = "#2AA198") bs_theme_fonts("Fira Code") ui <- navbarPage( &nbsp;&nbsp;"Theming demo app", ..., &nbsp;tags$link(href = "https://fonts.googleapis.com/css?family=Fira+Code", rel = "stylesheet") )</code>

[See here](https://rstudio.github.io/bslib/articles/recipes.html#fonts-1) for more on how to properly import font files

]

.panel[.panel-name[Result]

![](custom-fonts.png)

]
]

---
class: contrast

### 'Core' Shiny input widgets reflect bslib theme

.panelset[

.panel[.panel-name[selectInput()]

]

.panel[.panel-name[sliderInput()]

]

.panel[.panel-name[dateInput()]

]

.panel[.panel-name[textInput()/numericInput()]

]

---
class: contrast

### Oh no, R plots are unaware of the app's styling 😞

.panelset[

.panel[.panel-name[Result]

![](custom-plots.png)
]
]

---
class: contrast

### thematic to the rescue! 🎉

.panelset[

.panel[.panel-name[Result]

![](custom-thematic.png)

]

.panel[.panel-name[Code]

<code class ='r hljs remark-code'>library(shiny) library(bslib) shinyOptions(bslib = TRUE) bs_theme_new() bs_theme_base_colors(bg = "#002B36", fg = "#EEE8D5") bs_theme_accent_colors(primary = "#2AA198") thematic::thematic_shiny() ui <- navbarPage( &nbsp;&nbsp;"Theming demo app", ..., &nbsp;&nbsp;tags$link(href = "//fonts.googleapis.com/css?family=Fira+Code", rel = "stylesheet") )</code>

* __thematic__'s [auto-theming](https://rstudio.github.io/thematic/articles/auto.html) essentially translates CSS styles into new R defaults. It works:
  * Regardless of _how_ you style the Shiny app
  * With RStudio and R Markdown (although, custom CSS styles must come from **bslib**)
]
]

---
class: contrast

### Auto colors _and fonts_! 🎉

.panelset[

.panel[.panel-name[Result]

![](custom-thematic-fonts.png)

]

.panel[.panel-name[Code]

<code class ='r hljs remark-code'>library(shiny) library(bslib) shinyOptions(bslib = TRUE) bs_theme_new() bs_theme_base_colors(bg = "#002B36", fg = "#EEE8D5") bs_theme_accent_colors(primary = "#2AA198") bs_theme_fonts("Fira Code") thematic::thematic_shiny(font = "auto") ui <- navbarPage( &nbsp;&nbsp;"Theming demo app", ..., &nbsp;&nbsp;tags$link(href = "//fonts.googleapis.com/css?family=Fira+Code", rel = "stylesheet") )</code>

Works as long as either:

1. R can already render the font.
2. The font is Google Font (and **showtext** is installed)

]
]

---
class: contrast

### Now, with bslib's 'real-time' themer ✨

.panelset[

.panel[.panel-name[Result]

]

.panel[.panel-name[Code]

<code class ='r hljs remark-code'>library(shiny) library(bslib) shinyOptions(bslib = TRUE) bs_theme_new() thematic::thematic_shiny(font = "auto") bs_theme_preview()</code>

* `bs_theme_preview()` gives you a demo app with the real-time themer
* To run any app with the themer, use `run_with_themer()`

]
]

---
class: middle, center

# Demo

---
class: contrast

### 'Auto-theming' in R Markdown's `html_document()`

---
class: contrast

### 'Custom-theming' in non-HTML output formats