garrick
/
xaringanthemer
mirror da https://github.com/gadenbuie/xaringanthemer.git
Segui 1
Vota 0
Forka 0
Codice Problemi 0 Rilasci 10 Wiki Attività
Sfoglia il codice sorgente

Break out documentation into child chunks

tags/v0.1.1
Garrick Aden-Buie 8 anni fa
parent
d03897827d
commit
2cd7d2e63b
14 ha cambiato i file con 291 aggiunte e 458 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. +2
    -0
      .Rbuildignore
  2. +12
    -211
      README.Rmd
  3. +32
    -20
      README.md
  4. +0
    -2
      vignettes/css-help.Rmd
  5. +0
    -2
      vignettes/css-help.md
  6. +44
    -0
      vignettes/rmdchunks/_fonts.Rmd
  7. +6
    -0
      vignettes/rmdchunks/_installation.Rmd
  8. +38
    -0
      vignettes/rmdchunks/_quick-intro.Rmd
  9. +7
    -0
      vignettes/rmdchunks/_tagline-gif.Rmd
  10. +12
    -0
      vignettes/rmdchunks/_thanks.Rmd
  11. +123
    -0
      vignettes/rmdchunks/_themes.Rmd
  12. +0
    -2
      vignettes/template-variables.Rmd
  13. +0
    -2
      vignettes/template-variables.md
  14. +15
    -219
      vignettes/xaringanthemer.Rmd

+ 2
- 0
.Rbuildignore Vedi File

@@ -3,3 +3,5 @@
^README\.Rmd$
^LICENSE\.md$
^make\.R$
^vignettes/singles$
^tests_$

+ 12
- 211
README.Rmd Vedi File

@@ -17,13 +17,9 @@ library(xaringanthemer)
```
# xaringanthemer

[xaringan]: https://github.com/yihui/xaringan
[remarkjs]: https://github.com/gnab/remark
[template-variables]: vignettes/template-variables.md

Give your [xaringan] slides some style with **xaringanthemer** within your `slides.Rmd` file without (much) CSS.

![](vignettes/images/examples.gif)
```{r child="vignettes/rmdchunks/_tagline-gif.Rmd"}
```

```{r toc, results='asis', echo=FALSE, message=FALSE, eval=FALSE}
devtools::source_gist("c83e078bf8c81b035e32c3fc0cf04ee8", filename = 'render_toc.R')
@@ -43,172 +39,21 @@ gsub(" -", "-", sub("^-.+?\n", "", x))

## Installation

**xaringanthemer** lives here on GitHub.

```r
# install.packages("devtools")
devtools::install_github("gadenbuie/xaringanthemer")
```{r child="vignettes/rmdchunks/_installation.Rmd"}
```

## 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)
[theme-functions]: #themes
[theme-settings]: #theme-settings
[template-variables]: vignettes/template-variables.md

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")
)
```{r child="vignettes/rmdchunks/_quick-intro.Rmd"}
```
````

![](vignettes/images/example_mono_light_1c5253.png)

**xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore](#theme-settings) the [template variables][template-variables] that you can adjust in each of the themes!

<center><img src="vignettes/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)
```

![](vignettes/images/example_mono_light.png)

#### `mono_dark()`

A dark theme based around a single color.

```{r mono_dark}
demo_function_call(mono_dark, 1)
```

![](vignettes/images/example_mono_dark.png)

#### `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)
```

![](vignettes/images/example_mono_accent.png)

#### `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)
```

![](vignettes/images/example_mono_accent_inverse.png)

### 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)
```

![](vignettes/images/example_duo.png)

#### `duo_accent()`

The default Xaringan theme with two accent colors.

```{r duo_accent}
demo_function_call(duo_accent, 2)
```

![](vignettes/images/example_duo_accent.png)

#### `duo_accent_inverse()`

An "inverted" default Xaringan theme with two accent colors.

```{r duo_accent_inverse}
demo_function_call(duo_accent_inverse, 2)
```

![](vignettes/images/example_duo_accent_inverse.png)

### 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)
```

![](vignettes/images/example_solarized_light.png)

#### `solarized_dark()`

```{r solarized_dark}
demo_function_call(solarized_dark, 0)
```

![](vignettes/images/example_solarized_dark.png)


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
```{r child="vignettes/rmdchunks/_themes.Rmd"}
```

## Theme Settings
@@ -227,7 +72,7 @@ All of the theme options are named so that you first think of the element you wa
Here are some of the `text_` theme options:

```{r, results='asis', echo=FALSE}
source("R/theme_settings.R")
source(here::here("R/theme_settings.R"))
tvv <- template_variables$variable
cat(paste0("- `", tvv[grepl("^text_", tvv)][1:5], "`"), sep = "\n")
cat("- *and more ...*")
@@ -287,54 +132,10 @@ Using the above example, we could color text red `.red[like this]` or write `.sm

## 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.
[adding-custom-css]: #adding-custom-css

**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 = ", "))
```{r child="vignettes/rmdchunks/_fonts.Rmd"}
```
--- 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")
)
```{r child="vignettes/rmdchunks/_thanks.Rmd"}
```

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) ([&commat;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!

+ 32
- 20
README.md Vedi File

@@ -5,9 +5,10 @@

Give your [xaringan](https://github.com/yihui/xaringan) slides some
style with **xaringanthemer** within your `slides.Rmd` file without
(much) CSS.
(much)
CSS.

![](vignettes/images/examples.gif)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/examples.gif" width="100%" />

- [Installation](#installation)
- [Quick Intro](#quick-intro)
@@ -30,6 +31,8 @@ devtools::install_github("gadenbuie/xaringanthemer")

## Quick Intro

<!-- Set link to theme-settings, template-variables, theme functions -->

First, add `css: xaringan-themer.css` to your xaringan slides YAML
header under `xaringan::moonreader:`.

@@ -57,7 +60,7 @@ mono_light(
```
````

![](vignettes/images/example_mono_light_1c5253.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_mono_light_1c5253.png" width="100%" />

**xaringanthemer** is <kbd>Tab</kbd> friendly – [use autocomplete to
explore](#theme-settings) the [template
@@ -67,7 +70,7 @@ themes\!

<center>

<img src="vignettes/images/rmarkdown-template-screenshot.png" width="350px">
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/rmarkdown-template-screenshot.png" width="350px" />

</center>

@@ -83,45 +86,49 @@ for your slides, based around a single color.

#### `mono_light()`

A light theme based around a single color.
A light theme based around a single
color.

``` r
mono_light(base_color = "#23395b")
```

![](vignettes/images/example_mono_light.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_mono_light.png" width="100%" />

#### `mono_dark()`

A dark theme based around a single color.
A dark theme based around a single
color.

``` r
mono_dark(base_color = "#cbf7ed")
```

![](vignettes/images/example_mono_dark.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_mono_dark.png" width="100%" />

#### `mono_accent()`

The default xaringan theme with a single color used for color accents on
select elements (headers, bold text, etc.).
select elements (headers, bold text,
etc.).

``` r
mono_accent(base_color = "#43418A")
```

![](vignettes/images/example_mono_accent.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_mono_accent.png" width="100%" />

#### `mono_accent_inverse()`

An “inverted” default xaringan theme with a single color used for color
accents on select elements (headers, bold text, etc.).
accents on select elements (headers, bold text,
etc.).

``` r
mono_accent_inverse(base_color = "#3C989E")
```

![](vignettes/images/example_mono_accent_inverse.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_mono_accent_inverse.png" width="100%" />

### Duotone

@@ -129,23 +136,25 @@ These themes build from two (ideally) complementary colors.

#### `duo()`

A two-colored theme based on a primary and secondary color.
A two-colored theme based on a primary and secondary
color.

``` r
duo(primary_color = "#1F4257", secondary_color = "#F97B64")
```

![](vignettes/images/example_duo.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_duo.png" width="100%" />

#### `duo_accent()`

The default Xaringan theme with two accent colors.
The default Xaringan theme with two accent
colors.

``` r
duo_accent(primary_color = "#006747", secondary_color = "#CFC493")
```

![](vignettes/images/example_duo_accent.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_duo_accent.png" width="100%" />

#### `duo_accent_inverse()`

@@ -156,7 +165,7 @@ colors.
duo_accent_inverse(primary_color = "#006747", secondary_color = "#CFC493")
```

![](vignettes/images/example_duo_accent_inverse.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_duo_accent_inverse.png" width="100%" />

### Solarized

@@ -164,7 +173,8 @@ 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).
paired or
constrasted).

#### `solarized_light()`

@@ -172,7 +182,7 @@ paired or constrasted).
solarized_light()
```

![](vignettes/images/example_solarized_light.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_solarized_light.png" width="100%" />

#### `solarized_dark()`

@@ -180,7 +190,7 @@ solarized_light()
solarized_dark()
```

![](vignettes/images/example_solarized_dark.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_solarized_dark.png" width="100%" />

To do this, your YAML header should look more-or-less like this:

@@ -283,6 +293,8 @@ the above example, we could color text red `.red[like this]` or write

## Fonts

<!-- Need to set [adding-custom-css] -->

Yihui picked out great fonts for the default **xaringan** theme, but
sometimes you want something new and interesting.


+ 0
- 2
vignettes/css-help.Rmd Vedi File

@@ -1,7 +1,5 @@
---
title: "xaringanthemer CSS Help"
author: "Garrick Aden-Buie"
date: "2018-05-09"
output: rmarkdown::html_vignette
vignette: >
%\VignetteIndexEntry{xaringanthemer CSS Help}

+ 0
- 2
vignettes/css-help.md Vedi File

@@ -1,7 +1,5 @@
xaringanthemer CSS Help
================
Garrick Aden-Buie
2018-05-09

Jump to: [Colors](#colors), [Sizes](#sizes), [Positioning](#positioning)


+ 44
- 0
vignettes/rmdchunks/_fonts.Rmd Vedi File

@@ -0,0 +1,44 @@
<!-- Need to set [adding-custom-css] -->

[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"))
)
```

+ 6
- 0
vignettes/rmdchunks/_installation.Rmd Vedi File

@@ -0,0 +1,6 @@
**xaringanthemer** lives here on GitHub.

```r
# install.packages("devtools")
devtools::install_github("gadenbuie/xaringanthemer")
```

+ 38
- 0
vignettes/rmdchunks/_quick-intro.Rmd Vedi File

@@ -0,0 +1,38 @@
<!-- Set link to theme-settings, template-variables, theme functions -->

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][theme-functions].

````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")
)
```
````

`r knitr::include_graphics(here::here("vignettes/images/example_mono_light_1c5253.png"))`

**xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore][theme-settings] the [template variables][template-variables] that you can adjust in each of the themes!

<center>
```{r out.width="350px"}
knitr::include_graphics(here::here("vignettes/images/rmarkdown-template-screenshot.png"))
```
</center>

You can also skip the above and just create a *Ninja Themed Presentation* from the New R Markdown Document menu in RStudio.

+ 7
- 0
vignettes/rmdchunks/_tagline-gif.Rmd Vedi File

@@ -0,0 +1,7 @@
[xaringan]: https://github.com/yihui/xaringan

Give your [xaringan] slides some style with **xaringanthemer** within your `slides.Rmd` file without (much) CSS.

```{r}
knitr::include_graphics(here::here("vignettes/images/examples.gif"))
```

+ 12
- 0
vignettes/rmdchunks/_thanks.Rmd Vedi File

@@ -0,0 +1,12 @@
***

[xaringan]: https://github.com/yihui/xaringan
[remarkjs]: https://github.com/gnab/remark

**xaringanthemer** was built by [Garrick Aden-Buie](https://www.garrickadenbuie.com) ([&commat;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!

+ 123
- 0
vignettes/rmdchunks/_themes.Rmd Vedi File

@@ -0,0 +1,123 @@
### 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)
```

`r knitr::include_graphics(here::here("vignettes/images/example_mono_light.png"))`

#### `mono_dark()`

A dark theme based around a single color.

```{r mono_dark}
demo_function_call(mono_dark, 1)
```

`r knitr::include_graphics(here::here("vignettes/images/example_mono_dark.png"))`

#### `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)
```

`r knitr::include_graphics(here::here("vignettes/images/example_mono_accent.png"))`

#### `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)
```

`r knitr::include_graphics(here::here("vignettes/images/example_mono_accent_inverse.png"))`


### 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)
```

`r knitr::include_graphics(here::here("vignettes/images/example_duo.png"))`

#### `duo_accent()`

The default Xaringan theme with two accent colors.

```{r duo_accent}
demo_function_call(duo_accent, 2)
```

`r knitr::include_graphics(here::here("vignettes/images/example_duo_accent.png"))`

#### `duo_accent_inverse()`

An "inverted" default Xaringan theme with two accent colors.

```{r duo_accent_inverse}
demo_function_call(duo_accent_inverse, 2)
```

`r knitr::include_graphics(here::here("vignettes/images/example_duo_accent_inverse.png"))`

### 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)
```

`r knitr::include_graphics(here::here("vignettes/images/example_solarized_light.png"))`

#### `solarized_dark()`

```{r solarized_dark}
demo_function_call(solarized_dark, 0)
```

`r knitr::include_graphics(here::here("vignettes/images/example_solarized_dark.png"))`


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
```

+ 0
- 2
vignettes/template-variables.Rmd Vedi File

@@ -1,7 +1,5 @@
---
title: "Template Variables"
author: "Garrick Aden-Buie"
date: "2018-05-08"
output:
rmarkdown::html_vignette: default
vignette: >

+ 0
- 2
vignettes/template-variables.md Vedi File

@@ -1,7 +1,5 @@
Template Variables
================
Garrick Aden-Buie
2018-05-08

The following table shows the template variables, their default values
in the standard `xaringan` theme, the primary element to which the

+ 15
- 219
vignettes/xaringanthemer.Rmd Vedi File

@@ -1,7 +1,5 @@
---
title: "Xaringan CSS Theme Generator"
author: "Garrick Aden-Buie"
date: "2018-05-09"
output: rmarkdown::html_vignette
vignette: >
%\VignetteIndexEntry{Overview of xaringanthemer}
@@ -34,192 +32,34 @@ knitr::opts_chunk$set(
)
library(xaringanthemer)
```
# xaringanthemer

[xaringan]: https://github.com/yihui/xaringan
[remarkjs]: https://github.com/gnab/remark

Give your [xaringan] slides some style with **xaringanthemer** within your `slides.Rmd` file without (much) CSS.

![](images/examples.gif)

```{r toc, results='asis', echo=FALSE, message=FALSE, eval=FALSE}
devtools::source_gist("c83e078bf8c81b035e32c3fc0cf04ee8", filename = 'render_toc.R')
x <- render_toc("README.Rmd", toc_depth = 3)
gsub(" -", "-", sub("^-.+?\n", "", x))
```

- [Installation](#installation)
- [Quick Intro](#quick-intro)
- [Themes](#themes)
- [Monotone](#monotone)
- [Duotone](#duotone)
- [Solarized](#solarized)
- [Theme Settings](#theme-settings)
- [Adding Custom CSS](#adding-custom-css)
- [Fonts](#fonts)
Jump to:
[Quick Intro](#quick-intro),
[Themes](#themes),
[Theme Settings](#theme-settings),
[Adding Custom CSS](#adding-custom-css),
[Fonts](#fonts)

## Quick Intro

First, add `css: xaringan-themer.css` to your xaringan slides YAML header under `xaringan::moonreader:`.
[theme-functions]: reference/index.html
[theme-settings]: #theme-settings
[template-variables]: articles/template-variables.html

```yaml
output:
xaringan::moon_reader:
lib_dir: libs
css: xaringan-themer.css
```{r child="rmdchunks/_quick-intro.Rmd"}
```

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")
)
```
````

![](images/example_mono_light_1c5253.png)

**xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore](#theme-settings) the template variables^[tv] that you can adjust in each of the themes!

[tv]: See `vignette("template-variables", "xaringanthemer")`

<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)
```

![](images/example_mono_light.png)

#### `mono_dark()`

A dark theme based around a single color.

```{r mono_dark}
demo_function_call(mono_dark, 1)
```

![](images/example_mono_dark.png)

#### `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)
```

![](images/example_mono_accent.png)

#### `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)
```

![](images/example_mono_accent_inverse.png)

### 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)
```

![](images/example_duo.png)

#### `duo_accent()`

The default Xaringan theme with two accent colors.

```{r duo_accent}
demo_function_call(duo_accent, 2)
```

![](images/example_duo_accent.png)

#### `duo_accent_inverse()`

An "inverted" default Xaringan theme with two accent colors.

```{r duo_accent_inverse}
demo_function_call(duo_accent_inverse, 2)
```

![](images/example_duo_accent_inverse.png)

### 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)
```

![](images/example_solarized_light.png)

#### `solarized_dark()`

```{r solarized_dark}
demo_function_call(solarized_dark, 0)
```

![](images/example_solarized_dark.png)


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
```{r child="rmdchunks/_themes.Rmd"}
```

## Theme Settings
@@ -238,7 +78,7 @@ All of the theme options are named so that you first think of the element you wa
Here are some of the `text_` theme options:

```{r, results='asis', echo=FALSE}
source("../R/theme_settings.R")
source(here::here("R/theme_settings.R"))
tvv <- template_variables$variable
cat(paste0("- `", tvv[grepl("^text_", tvv)][1:5], "`"), sep = "\n")
cat("- *and more ...*")
@@ -298,54 +138,10 @@ Using the above example, we could color text red `.red[like this]` or write `.sm

## 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.
[adding-custom-css]: #adding-custom-css

**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 = ", "))
```{r child="rmdchunks/_fonts.Rmd"}
```
--- 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")
)
```{r child="rmdchunks/_thanks.Rmd"}
```

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) ([&commat;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!

Write Preview
Loading…
Annulla
Salva