|
|
|
|
|
|
|
|
|
|
|
--- |
|
|
|
|
|
title: "Xaringan CSS Theme Generator" |
|
|
|
|
|
author: "Garrick Aden-Buie" |
|
|
|
|
|
date: "`r Sys.Date()`" |
|
|
|
|
|
output: rmarkdown::html_vignette |
|
|
|
|
|
vignette: > |
|
|
|
|
|
%\VignetteIndexEntry{Overview of xaringanthemer} |
|
|
|
|
|
%\VignetteEngine{knitr::rmarkdown} |
|
|
|
|
|
%\VignetteEncoding{UTF-8} |
|
|
|
|
|
--- |
|
|
|
|
|
<!-- This vignette was automatically created from README.Rmd |
|
|
|
|
|
|
|
|
|
|
|
Please consider removing installation instructions, badges, and |
|
|
|
|
|
any other README-specific material. |
|
|
|
|
|
|
|
|
|
|
|
You can include short independent documents in README.Rmd using |
|
|
|
|
|
the following chunk argument syntax: |
|
|
|
|
|
child='vignettes/rmdhunks/example1.Rmd' |
|
|
|
|
|
|
|
|
|
|
|
https://yihui.name/knitr/demo/child/ |
|
|
|
|
|
or read-in chunks stored in an independent R script using knitr::read_chunk() |
|
|
|
|
|
https://yihui.name/knitr/demo/externalization/ --> |
|
|
|
|
|
|
|
|
|
|
|
<!-- README.md is generated from README.Rmd. Please edit that file --> |
|
|
|
|
|
|
|
|
|
|
|
```{r setup, include = FALSE} |
|
|
|
|
|
knitr::opts_chunk$set( |
|
|
|
|
|
collapse = TRUE, |
|
|
|
|
|
results = "asis", |
|
|
|
|
|
echo = FALSE, |
|
|
|
|
|
comment = "#>", |
|
|
|
|
|
fig.path = "man/figures/README-", |
|
|
|
|
|
out.width = "100%" |
|
|
|
|
|
) |
|
|
|
|
|
library(xaringanthemer) |
|
|
|
|
|
``` |
|
|
|
|
|
# xaringanthemer |
|
|
|
|
|
|
|
|
|
|
|
[xaringan]: https://github.com/yihui/xaringan |
|
|
|
|
|
[remarkjs]: https://github.com/gnab/remark |
|
|
|
|
|
|
|
|
|
|
|
Easily style your [xaringan] slides with **xaringanthemer**. |
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
```{r toc, results='asis', echo=FALSE, message=FALSE} |
|
|
|
|
|
devtools::source_gist("c83e078bf8c81b035e32c3fc0cf04ee8", filename = 'render_toc.R') |
|
|
|
|
|
x <- render_toc("readme-vignette.Rmd", toc_depth = 3) |
|
|
|
|
|
gsub(" -", "-", sub("^-.+?\n", "", x)) |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
## Quick Intro |
|
|
|
|
|
|
|
|
|
|
|
First, add `css: xaringan-themer.css` to your xaringan slides YAML header under `xaringan::moonreader:`. |
|
|
|
|
|
|
|
|
|
|
|
```yaml |
|
|
|
|
|
output: |
|
|
|
|
|
xaringan::moon_reader: |
|
|
|
|
|
lib_dir: libs |
|
|
|
|
|
css: xaringan-themer.css |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
Then, in the knitr setup chunk, load **xaringanthemer** and try one of the [theme functions](#themes). |
|
|
|
|
|
|
|
|
|
|
|
````markdown |
|
|
|
|
|
```{r setup, include = FALSE}`r ""` |
|
|
|
|
|
options(htmltools.dir.version = FALSE) |
|
|
|
|
|
|
|
|
|
|
|
library(xaringanthemer) |
|
|
|
|
|
mono_light( |
|
|
|
|
|
base_color = "#1c5253", |
|
|
|
|
|
header_font_google = google_font("Josefin Sans"), |
|
|
|
|
|
text_font_google = google_font("Montserrat", "300", "300i"), |
|
|
|
|
|
code_font_google = google_font("Droid Mono") |
|
|
|
|
|
) |
|
|
|
|
|
``` |
|
|
|
|
|
```` |
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
**xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore](#fully-customized) the themes! |
|
|
|
|
|
|
|
|
|
|
|
<center><img src="images/rmarkdown-template-screenshot.png" width="350px"></center> |
|
|
|
|
|
|
|
|
|
|
|
You can also skip the above and just create a *Ninja Themed Presentation* from the New R Markdown Document menu in RStudio. |
|
|
|
|
|
|
|
|
|
|
|
## Themes |
|
|
|
|
|
|
|
|
|
|
|
### Monotone |
|
|
|
|
|
|
|
|
|
|
|
Use these functions to automatically create a consistent color palette for your slides, based around a single color. |
|
|
|
|
|
|
|
|
|
|
|
#### `mono_light()` |
|
|
|
|
|
|
|
|
|
|
|
A light theme based around a single color. |
|
|
|
|
|
|
|
|
|
|
|
```{r mono_light} |
|
|
|
|
|
demo_function_call <- function(f, n_params = 1) { |
|
|
|
|
|
cat(sep = "", |
|
|
|
|
|
"```r\n", |
|
|
|
|
|
paste(substitute(f)), "(", |
|
|
|
|
|
if (n_params > 0) paste(collapse = ", ", |
|
|
|
|
|
sapply(1:n_params, function(i) { |
|
|
|
|
|
paste0(names(formals(f))[i], ' = "', formals(f)[[i]], '"')})), |
|
|
|
|
|
")\n```" |
|
|
|
|
|
) |
|
|
|
|
|
} |
|
|
|
|
|
demo_function_call(mono_light, 1) |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
#### `mono_dark()` |
|
|
|
|
|
|
|
|
|
|
|
A dark theme based around a single color. |
|
|
|
|
|
|
|
|
|
|
|
```{r mono_dark} |
|
|
|
|
|
demo_function_call(mono_dark, 1) |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
#### `mono_accent()` |
|
|
|
|
|
|
|
|
|
|
|
The default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.). |
|
|
|
|
|
|
|
|
|
|
|
```{r mono_accent} |
|
|
|
|
|
demo_function_call(mono_accent, 1) |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
#### `mono_accent_inverse()` |
|
|
|
|
|
|
|
|
|
|
|
An "inverted" default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.). |
|
|
|
|
|
|
|
|
|
|
|
```{r mono_accent_inverse} |
|
|
|
|
|
demo_function_call(mono_accent_inverse, 1) |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Duotone |
|
|
|
|
|
|
|
|
|
|
|
These themes build from two (ideally) complementary colors. |
|
|
|
|
|
|
|
|
|
|
|
#### `duo()` |
|
|
|
|
|
|
|
|
|
|
|
A two-colored theme based on a primary and secondary color. |
|
|
|
|
|
|
|
|
|
|
|
```{r duo} |
|
|
|
|
|
demo_function_call(duo, 2) |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
#### `duo_accent()` |
|
|
|
|
|
|
|
|
|
|
|
The default Xaringan theme with two accent colors. |
|
|
|
|
|
|
|
|
|
|
|
```{r duo_accent} |
|
|
|
|
|
demo_function_call(duo_accent, 2) |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
#### `duo_accent_inverse()` |
|
|
|
|
|
|
|
|
|
|
|
An "inverted" default Xaringan theme with two accent colors. |
|
|
|
|
|
|
|
|
|
|
|
```{r duo_accent_inverse} |
|
|
|
|
|
demo_function_call(duo_accent_inverse, 2) |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
### Solarized |
|
|
|
|
|
|
|
|
|
|
|
There are also two themes based around the [solarized color palette](http://ethanschoonover.com/solarized), `solarized_light()` and `solarized_dark()`. |
|
|
|
|
|
For both themes, it is advisted to change the syntax highlighting theme to `solarized-light` or `solarized-dark` (looks great paired or constrasted). |
|
|
|
|
|
|
|
|
|
|
|
#### `solarized_light()` |
|
|
|
|
|
|
|
|
|
|
|
```{r solarized_light} |
|
|
|
|
|
demo_function_call(solarized_light, 0) |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
#### `solarized_dark()` |
|
|
|
|
|
|
|
|
|
|
|
```{r solarized_dark} |
|
|
|
|
|
demo_function_call(solarized_dark, 0) |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
To do this, your YAML header should look more-or-less like this: |
|
|
|
|
|
|
|
|
|
|
|
```yaml |
|
|
|
|
|
output: |
|
|
|
|
|
xaringan::moon_reader: |
|
|
|
|
|
lib_dir: libs |
|
|
|
|
|
css: ["xaringan-themer.css"] |
|
|
|
|
|
nature: |
|
|
|
|
|
highlightStyle: solarized-dark |
|
|
|
|
|
highlightLines: true |
|
|
|
|
|
countIncrementalSlides: false |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
## Theme Settings |
|
|
|
|
|
|
|
|
|
|
|
The theme functions listed above are just wrappers around the central function of this package, `write_xaringan_theme()`. |
|
|
|
|
|
If you want to start from the default **xaringan** theme and make a few modifications, start there. |
|
|
|
|
|
|
|
|
|
|
|
All of the theme template variables are repeated in each of the theme functions (instead of relying on `...`) so that you can use autocompletion to find and change the defaults for any theme function. |
|
|
|
|
|
To override the default value of any theme functions, set the appropriate argument in the theme function. |
|
|
|
|
|
|
|
|
|
|
|
As an example, try loading `xaringanthemer`, type out `duo_theme(` and then press <kbd>Tab</kbd> to see all of the theme options. |
|
|
|
|
|
|
|
|
|
|
|
All of the theme options are named so that you first think of the element you want to change, then the property of that element. |
|
|
|
|
|
|
|
|
|
|
|
Here are some of the `text_` theme options: |
|
|
|
|
|
|
|
|
|
|
|
```{r, results='asis', echo=FALSE} |
|
|
|
|
|
source("../R/theme_settings.R") |
|
|
|
|
|
tvv <- template_variables$variable |
|
|
|
|
|
cat(paste0("- `", tvv[grepl("^text_", tvv)][1:5], "`"), sep = "\n") |
|
|
|
|
|
cat("- *and more ...*") |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
And here are the title slide theme options: |
|
|
|
|
|
|
|
|
|
|
|
```{r results='asis', echo=FALSE} |
|
|
|
|
|
cat(paste0("- `", tvv[grepl("^title_slide_", tvv)], "`"), sep = "\n") |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
## Adding Custom CSS |
|
|
|
|
|
|
|
|
|
|
|
You can also add custom CSS classes using the `extra_css` argument in the theme functions. |
|
|
|
|
|
This argument takes a named list of CSS definitions each containing a named list of CSS property-value pairs. |
|
|
|
|
|
|
|
|
|
|
|
```r |
|
|
|
|
|
extra_css <- list( |
|
|
|
|
|
".red" = list(color = "red"), |
|
|
|
|
|
".small" = list("font-size" = "90%"), |
|
|
|
|
|
".full-width" = list( |
|
|
|
|
|
display = "flex", |
|
|
|
|
|
width = "100%", |
|
|
|
|
|
flex = "1 1 auto" |
|
|
|
|
|
) |
|
|
|
|
|
) |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
If you would rather keep your additional css definitions in a separate file, you can call `write_extra_css()` separately. |
|
|
|
|
|
Just be sure to include your new CSS file in the list of applied files in your YAML header. |
|
|
|
|
|
|
|
|
|
|
|
```r |
|
|
|
|
|
write_extra_css(css = extra_css, outfile = "custom.css") |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
```{r results='asis', echo=FALSE} |
|
|
|
|
|
extra_css <- list( |
|
|
|
|
|
".red" = list(color = "red"), |
|
|
|
|
|
".small" = list("font-size" = "90%"), |
|
|
|
|
|
".full-width" = list( |
|
|
|
|
|
display = "flex", |
|
|
|
|
|
width = "100%", |
|
|
|
|
|
flex = "1 1 auto" |
|
|
|
|
|
) |
|
|
|
|
|
) |
|
|
|
|
|
cat( |
|
|
|
|
|
"\n```css", |
|
|
|
|
|
"/* Extra CSS */", |
|
|
|
|
|
xaringanthemer:::list2css(extra_css), |
|
|
|
|
|
"```", |
|
|
|
|
|
sep = "\n" |
|
|
|
|
|
) |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
This is most helpful when wanting to define helper classes to work with the [remark.js][remarkjs] `.class[]` syntax. |
|
|
|
|
|
Using the above example, we could color text red `.red[like this]` or write `.small[in smaller font size]`. |
|
|
|
|
|
|
|
|
|
|
|
## Fonts |
|
|
|
|
|
|
|
|
|
|
|
[google-fonts]: https://fonts.google.com |
|
|
|
|
|
|
|
|
|
|
|
Yihui picked out great fonts for the default **xaringan** theme, but sometimes you want something new and interesting. |
|
|
|
|
|
|
|
|
|
|
|
**xaringanthemer** makes it easy to use [Google Fonts][google-fonts] in your presentations (well, as long as you have an internet connection) or to fully specify your font files. |
|
|
|
|
|
|
|
|
|
|
|
To use [Google Fonts][google-fonts], set the `_font_google` theme arguments -- |
|
|
|
|
|
```{r results='asis', echo=FALSE} |
|
|
|
|
|
cat(paste0("`", tvv[grepl("_font_google$", tvv)], "`", collapse = ", ")) |
|
|
|
|
|
``` |
|
|
|
|
|
--- using the `google_font()` helper. |
|
|
|
|
|
See `?google_font` for more info. |
|
|
|
|
|
|
|
|
|
|
|
```r |
|
|
|
|
|
mono_light( |
|
|
|
|
|
header_font_google = google_font("Josefin Slab", "600"), |
|
|
|
|
|
text_font_google = google_font("Work Sans", "300", "300i"), |
|
|
|
|
|
code_font_google = google_font("IBM Plex Mono") |
|
|
|
|
|
) |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
If you set an `xxx_font_google` theme arguments, then `xxx_font_family`, `xxx_font_weight` and `xxx_font_url` are overwritten -- where `xxx` in `{header, text, code}`. |
|
|
|
|
|
Of course, you can manually set `header_font_url`, etc., and ignore the `header_font_google` argument. |
|
|
|
|
|
|
|
|
|
|
|
For example, suppose you want to use a ligature font for the code font, such as [Fira Code](https://github.com/yihui/xaringan/issues/83). |
|
|
|
|
|
Just set `code_font_family` and `code_font_url`! |
|
|
|
|
|
|
|
|
|
|
|
```r |
|
|
|
|
|
solarized_dark( |
|
|
|
|
|
code_font_family = "Fira Code", |
|
|
|
|
|
code_font_url = "https://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/fira_code.css" |
|
|
|
|
|
) |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
If you need to import additional fonts for use in [custom CSS definitions](#adding-custom-css), you can use the `extra_fonts` argument to pass a list of URLs or `google_font()`s. |
|
|
|
|
|
|
|
|
|
|
|
```r |
|
|
|
|
|
mono_light( |
|
|
|
|
|
extra_fonts = list(google_font("Sofia")), |
|
|
|
|
|
extra_css = list(".title-slide h2" = list("font-family" = "Sofia")) |
|
|
|
|
|
) |
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
*** |
|
|
|
|
|
|
|
|
|
|
|
**xaringanthemer** was built by [Garrick Aden-Buie](https://www.garrickadenbuie.com) ([@grrrck](https://twitter.com/grrrck)). |
|
|
|
|
|
|
|
|
|
|
|
Big thank you to [Yihui Xie](https://yihui.name), especially for [xaringan]. |
|
|
|
|
|
Also thanks to [Ole Petter Bang](http://gnab.org) for [remark.js][remarkjs]. |
|
|
|
|
|
|
|
|
|
|
|
Feel free to [file an issue](https://github.com/gadenbuie/xaringanthemer/issues) if you find a bug or have a theme suggestion -- or better yet, submit a pull request! |
