Automatic colors

To relay the color styling of your shiny to static R plots, just call thematic_on(). Although it’s not required, it’s best practice to also add onStop(thematic_off) (just in case R code that runs after the app doesn’t want to use thematic):

library(shiny)
library(ggplot2)
library(thematic)

thematic_on()
onStop(thematic_off)

shinyApp(
  ui = fluidPage(
    theme = shinythemes::shinytheme("darkly"),
    tabsetPanel(type = "pills",
      tabPanel("ggplot", plotOutput("ggplot")),
      tabPanel("lattice", plotOutput("lattice")),
      tabPanel("base", plotOutput("base"))
    )
  ),
  server = function(input, output) {
    output$ggplot <- renderPlot({
      ggplot(mtcars, aes(wt, mpg, label = rownames(mtcars), color = factor(cyl))) +
        geom_point() +
        ggrepel::geom_text_repel()
    })
    output$lattice <- renderPlot(lattice::show.settings())
    output$base <- renderPlot({
      image(volcano, col = thematic_get_option("sequential"))
    })
  }
)

Although this particular app leverages shinythemes to style the app, thematic works regardless of how the app is styled (by the way, the new bootstraplib package provides an exciting new alternative to shinythemes that soon will be our recommend way to style shiny apps). The magic is made possible through shiny::getCurrentOutputInfo(), which returns the relevant color and font information for the plot’s HTML container. That means, if you wanted, you could style the plot’s container in CSS and thematic would pick up those styles. For example, to change the bg/fg of the ggplot output, you could include the following in your UI definition:

tags$style(HTML("#ggplot {color: aqua; 
background-color: purple }")))

And to change the accent color:

# Change the link (i.e., accent) color
tags$style(HTML("#ggplot a {color: red}"))

By the way, if you’re a shiny developer and wish to add similar auto-theming capabilities to a custom output, you can add a .shiny-report-theme class to the output container to obtain styles via getCurrentOutputInfo(). And similarly, if you’re an htmlwidgets developer, you can simply set reportTheme = TRUE in htmlwidgets::shinyWidgetOutput().

Rendering Google Fonts

Rendering of Google Fonts in shiny requires either showtext or ragg to be installed. showtext works with shiny’s default png device, so just make sure it’s installed and add library(showtext) (to make sure deployment works as well).

# install.packages("showtext")
library(showtext)
thematic_on(font = "Pacifico")

If you’d prefer to use ragg instead, which in some environments (especially hosted ones) can produce higher quality and consistent output in less time (see here for more details), do the following:

# install.packages("ragg")
library(ragg)
shinyOptions(shiny.useragg = TRUE)
thematic_on(font = "Pacifico")

Auto font rendering

In the event that your app uses a Google Font (or a font family that is already known to R), you can turn on auto fonts without thinking twice:

thematic_on(font = "auto")

By the way, if you’re curious, to use a Google Font (e.g Pacifico), you can import the fonts remotely this way; however, it’s recommended to use local font files (for hosting reasons). The gfonts package makes it really easy to download and use Google Fonts locally.

tags$link(href="https://fonts.googleapis.com/css?family=Pacifico", rel="stylesheet")
tags$style(HTML("body{font-family: Pacifico}"))