class: middle, center # thematic: plot theming made easieR ### Carson Sievert ### Slides: https://bit.ly/thematic-show-tell ### Website: <https://rstudio.github.io/thematic/> <style type="text/css"> @import url(https://fonts.googleapis.com/css?family=Pacifico);body{font-family:Roboto Condensed}h1,h2,h3{font-family:Roboto Condensed}.remark-slide-content{background-color:#002B36;color:#FDF6E3}.remark-slide-content a{color:#2AA198}.remark-slide-content.darkly{background-color:#222;color:#FFF}.remark-slide-content.darkly a{color:#0CE3AC}.remark-slide-content.dark-mode{background-color:#444;color:#e4e4e4}.remark-slide-content.dark-mode a{color:#e39777}.remark-slide-content.lucid{background-color:#3D4752;color:#FFFFFF}.remark-slide-content.large{font-size:1.5rem}.remark-slide-content.contrast{background-color:#FFFFFF;color:black} </style> --- ## [**thematic**](https://github.com/rstudio/thematic): simplified theming for **ggplot2**, **lattice**, and **base** R graphics Not yet on CRAN, but install it now with: ```r remotes::install_github("rstudio/thematic") library(thematic) ``` For auto-theming in **shiny**, you'll currently need: ```r remotes::install_github("rstudio/shiny") ``` For auto-theming in **rmarkdown**, you'll currently need: ```r remotes::install_github("rstudio/rmarkdown#1706") ``` --- class: contrast ### Problem: R plots know nothing about CSS <img src="cranwhales.svg" width="100%" /> --- class: contrast ### `shinythemes::shinytheme("darkly")` ... 😞 <div align="right"> <img src="cranwhales-darkly.png" width="82%" /> </div> --- class: contrast ### Solution: `thematic::thematic_on()` <div align="right"> <img src="cranwhales-darkly.png" width="82%" /> </div> --- class: contrast ### Solution: `thematic::thematic_on()` ...🎉 <div align="right"> <img src="cranwhales-darkly-thematic.png" width="82%" /> </div> --- class: contrast ### Works with _any_ HTML/CSS <div align="right"> <img src="cranwhales-darkly-thematic.png" width="82%" /> </div> --- class: contrast ### Write custom CSS in R with **bslib**! <div align="center"> <img src="cranwhales-custom-code.svg" width="100%" /> </div> --- class: contrast ### Realtime-theming with **bslib** <div align="center"> <img src="realtime-theming.gif" width="100%" /> </div> --- class: contrast ### Can even work w/ `html_document()` (independent of **shiny**) <img src="html-document.svg" width="100%" /> --- class: contrast ### What about non-HTML documents? <div align="center"> <img src="tufte.svg" width="90%" /> </div> --- class: contrast ### Provide colors & fonts to `thematic_on()` <div align="center"> <img src="tufte-thematic.svg" width="100%" /> </div> --- class: contrast ### Can also work with complete ggplot2 themes! <div align="center"> <img src="tufte-thematic-ggthemes.svg" width="95%" /> </div> --- class: contrast ### Problem: R plots know nothing about RStudio themes ...😞 <div align="center"> <img src="rstudio.png" width="100%"> </div> --- class: contrast ### Solution: `thematic::thematic_on()` <div align="center"> <img src="rstudio.png" width="100%"> </div> --- class: contrast ### Solution: `thematic::thematic_on()` ...🎉 <div align="center"> <img src="rstudio-thematic.png" width="100%"> </div> --- class: large ### Summary * Call `thematic_on()` to make your R plots CSS/theme aware in **shiny**, **rmarkdown**, and RStudio! 🎉 * If auto-theming doesn't work for you, provide colors & fonts to `thematic_on()` * Any [Google Font](https://fonts.google.com/) works "out-of-the-box" (no install needed) --- class: center, middle ## Thank you! ### Slides: <https://bit.ly/thematic-show-tell> ### Learn more: <https://rstudio.github.io/thematic> #### Contact <i class="fab fa-twitter "></i> <a href='https://twitter.com/cpsievert'>@cpsievert</a> <br /> <i class="fab fa-github "></i> <a href='https://github.com/cpsievert'>@cpsievert</a> <br /> <i class="fas fa-globe "></i> <https://cpsievert.me/>