- Move long intro to pkgdown - README is now much shorter - Rename pkgdown "Get Started" to "Features" - Add ggplot theme to quick intro - Add pkgdown docs link to description

6 年前 · cc3471131f
--- a/.Rbuildignore
+++ b/.Rbuildignore
@@ -17,3 +17,6 @@
 ^vignettes/themes\.Rmd$
 ^data-raw$
 ^.history$
 ^doc$
 ^Meta$
 ^index\.md$
--- a/.gitignore
+++ b/.gitignore
@@ -81,3 +81,5 @@ Icon
 Network Trash Folder
 Temporary Items
 .apdisk
 doc
 Meta
--- a/DESCRIPTION
+++ b/DESCRIPTION
@@ -15,7 +15,8 @@ Description: Create beautifully color-cordinated and customized
    your slides' 'R Markdown' source file or in a separate external
    script.
 License: MIT + file LICENSE
 URL: https://github.com/gadenbuie/xaringanthemer
 URL: https://pkg.garrickadenbuie.com/xaringanthemer,
    https://github.com/gadenbuie/xaringanthemer
 BugReports: https://github.com/gadenbuie/xaringanthemer/issues
 Depends:
    R (>= 2.10)
--- a/R/color.R
+++ b/R/color.R
@@ -126,10 +126,10 @@ full_length_hex <- function(x) {
  varname <- substitute(x)
  stop_not_hex <- function() {
    stop(str_wrap(
      "`", deparse(varname), "` is not a hexadecimal color: ", x, ". ",
      "If you used valid CSS colors in your xaringan theme, please convert ",
      "these colors to hexadecimal form, as this is the format required by ",
      "ggplot2."
      "`", deparse(varname), "` is not a hexadecimal color: \"", x, "\". ",
      "theme_xaringan() requires colors to be specified in hexadecimal format.",
      " If you used valid CSS colors in your xaringan theme, please convert ",
      "these colors to hex format, e.g. \"#1a2b3c\"."
    ), call. = FALSE)
  }
  if (!grepl("^#", x) || grepl("[^#0-9a-fA-F]", x)) {
--- a/README.Rmd
+++ b/README.Rmd
@@ -10,7 +10,7 @@ knitr::opts_chunk$set(
  results = "asis",
  echo = FALSE,
  comment = "#>",
  fig.path = "man/figures/README-",
  fig.path = "man/figures/index-",
  out.width = "100%"
 )
 IS_README <- TRUE
@@ -29,130 +29,12 @@ library(xaringanthemer)
 ```{r child="man/fragments/_tagline-gif.Rmd"}
 ```

 ```{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)
 - [Colors](#colors)
 - [Fonts](#fonts)
 - [Adding Custom CSS](#adding-custom-css)

 ## Installation

 ```{r child="man/fragments/_installation.Rmd"}
 ```

 ## Quick Intro

 [theme-functions]: #themes
 [theme-settings]: #theme-settings
 [template-variables]: vignettes/template-variables.md

 ```{r child="man/fragments/_quick-intro.Rmd"}
 ```

 ## Themes

 ```{r child="man/fragments/_themes.Rmd"}
 ```

 ## Theme Settings

 The theme functions listed above are wrappers around the central function of this package, `style_xaringan()`.
 If you want to start from the default **xaringan** theme and make a few modifications, start there.

 All of the [theme template variables][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.
 A table of all template variables is included in [`vignette("template-variables", "xaringanthemer")`][template-variables].

 As an example, try typing out `style_duo_accent(` and then press <kbd>Tab</kbd> to see all of the theme options.

 The arguments of each theme function are named so that you can 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}
 load(here::here("R", "sysdata.rda"))
 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")
 ```

 ## Fonts

 [adding-custom-css]: #adding-custom-css

 ```{r child="man/fragments/_fonts.Rmd"}
 ```

 ## Colors

 ```{r child="man/fragments/_colors.Rmd"}
 ```

 ## 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(
  ".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 `style_extra_css()` separately.
 Just be sure to include your new CSS file in the list of applied files in your YAML header.
 ## Features

 ```r
 style_extra_css(css = extra_css, outfile = "custom.css")
 ```

 ```{r results='asis', echo=FALSE}
 extra_css <- list(
  ".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 add slide text `.small[in smaller font size]`.


 ```{r child="man/fragments/_thanks.Rmd"}
 ```

 ```{r include=FALSE}
 rm("IS_README")
 ```
 There's a lot more that **xaringanthemer** can do!
 [Discover xaringanthemer's features.](https://pkg.garrickadenbuie.com/xaringanthemer/features.html)
--- a/README.md
+++ b/README.md
@@ -19,17 +19,6 @@ style with **xaringanthemer** within your `slides.Rmd` file without

 <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/examples.gif" alt="Animation previewing many xaringanthemer themes" />

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

 ## Installation

 You can install **xaringanthemer** from CRAN
@@ -42,432 +31,12 @@ or you can install the development version of xaringanthemer from
 [GitHub](https://github.com/gadenbuie/xaringanthemer).

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

 ## Quick Intro

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

 First, add the `xaringan-themer.css` file to the YAML header of your
 xaringan slides.

 ``` yaml
 output:
  xaringan::moon_reader:
    css: xaringan-themer.css
 ```

 Then, in a hidden chunk just after the knitr setup chunk, load
 **xaringanthemer** and try one of the [theme functions](#themes).

 ```` markdown
 ```{r xaringan-themer, include = FALSE}
 library(xaringanthemer)
 style_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")
 )
 ```
 ````

 <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_light_1c5253.png" alt="Example title and normal slides using a green xaringanthemer theme" />

 ### Tab Completion

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

 <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example-rstudio-completion.gif" alt="Demonstration of argument auto-completion with RStudio" />

 ### R Markdown Template in RStudio

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

 <center>

 <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/rmarkdown-template-screenshot.png" alt="The 'New R Markdown Document' menu in RStudio" />

 </center>

 ## Themes

 **xaringanthemer** includes a number of functions that provide themed
 **xaringan** styles. All of the styling functions start with the
 `style_` prefix.

 The goal of each style function is to quickly set up a coordinated color
 palette for your slides based on one or two starter colors. Styles based
 on one color start with `style_mono_` and styles based on two colors
 start with `style_duo_`. How the starter colors are used is described in
 the final portion of the style function name. For example,
 `style_mono_accent()` uses a single color as an accent color.

 Note that the colors used below are for demonstration only, the point of
 the `style_` functions is for you to choose your own color palette\!

 If you color palette uses more than two colors, you can add additional
 colors with the `colors` argument. See the [Colors](#colors) section for
 more information.

 ### Monotone

 Use these functions to automatically create a consistent color palette
 for your slides, based around a single color.

 #### `style_mono_light()`

 A light theme based around a single color.

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

 ![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_light.png)

 #### `style_mono_dark()`

 A dark theme based around a single color.

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

 ![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_dark.png)

 #### `style_mono_accent()`

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

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

 ![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_accent.png)

 #### `style_mono_accent_inverse()`

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

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

 ![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_accent_inverse.png)

 ### Duotone

 These themes build from two (ideally) complementary colors.

 #### `style_duo()`

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

 ``` r
 style_duo(primary_color = "#1F4257", secondary_color = "#F97B64")
 # install.packages("remotes")
 remotes::install_github("gadenbuie/xaringanthemer")
 ```

 ![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo.png)

 #### `style_duo_accent()`

 The default Xaringan theme with two accent colors.

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

 ![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo_accent.png)

 #### `style_duo_accent_inverse()`

 An “inverted” default Xaringan theme with two accent colors.

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

 ![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo_accent_inverse.png)

 ### Solarized

 There are also two themes based around the [solarized color
 palette](http://ethanschoonover.com/solarized),
 `style_solarized_light()` and `style_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).

 #### `style_solarized_light()`

 ``` r
 style_solarized_light()
 ```

 ![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_solarized_light.png)

 #### `style_solarized_dark()`

 ``` r
 style_solarized_dark()
 ```

 ![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_solarized_dark.png)

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

 ``` yaml
 output:
  xaringan::moon_reader:
    css: ["xaringan-themer.css"]
    nature:
      highlightStyle: solarized-dark
      highlightLines: true
      countIncrementalSlides: false
 ```

 ## Theme Settings

 The theme functions listed above are wrappers around the central
 function of this package, `style_xaringan()`. If you want to start from
 the default **xaringan** theme and make a few modifications, start
 there.

 All of the [theme template variables](vignettes/template-variables.md)
 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. A
 table of all template variables is included in
 [`vignette("template-variables",
 "xaringanthemer")`](vignettes/template-variables.md).

 As an example, try typing out `style_duo_accent(` and then press
 <kbd>Tab</kbd> to see all of the theme options.

 The arguments of each theme function are named so that you can first
 think of the element you want to change, then the property of that
 element.

 Here are some of the `text_` theme options:

  - `text_color`
  - `text_bold_color`
  - `text_slide_number_color`
  - `text_font_size`
  - `text_slide_number_font_size`
  - *and more …*

 And here are the title slide theme options:

  - `title_slide_text_color`
  - `title_slide_background_color`
  - `title_slide_background_image`
  - `title_slide_background_size`
  - `title_slide_background_position`

 ## Fonts

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

 ### Default Fonts

 **xaringanthemer** by default uses a different set of default fonts for
 heading and body fonts. The new defaults use
 [Cabin](https://fonts.google.com/specimen/Cabin) for headings and [Noto
 Sans](https://fonts.google.com/specimen/Noto+Sans) for body text. These
 fonts are easier to read on screens and at a distance during
 presentations, and they support a wide variety of languages and weights.
 Another reason for the change is that the xaringan (remarkjs) default
 body font, *Droid Serif*, is no longer officially included in Google
 Fonts.

 If you would like to use the fonts from the [default xaringan
 theme](https://slides.yihui.name/xaringan/), you can use the following
 arguments in your style function.

 ``` r
 style_xaringan(
  text_font_family = "Droid Serif",
  text_font_url = "https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic",
  header_font_google = google_font("Yanone Kaffeesatz")
 )
 ```

 ### Custom and *Google Font* Fonts

 **xaringanthemer** makes it easy to use [Google
 Fonts](https://fonts.google.com) in your presentations (provided you
 have an internet connection during the presentation) or to fully specify
 your font files.

 To use [Google Fonts](https://fonts.google.com), set the
 `<type>_font_google` theme arguments – `text_font_google`,
 `header_font_google`, `code_font_google` — using the `google_font()`
 helper. The help documentation in `?google_font` provides more info.

 ``` r
 style_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 `<type>_font_google` theme arguments, then
 `<type>_font_family`, `<type>_font_weight` and `<type>_font_url` are
 overwritten – where `<type>` is one of `header`, `text`, or `code`.

 To use a font hosted outside of Google fonts, you need to provide both
 `<type>_font_family` and `<type>_font_url`. For example, suppose you
 want to use a code font with ligatures for your code chunks, such as
 [Fira Code](https://github.com/tonsky/FiraCode), which would be declared
 with `code_font_family`. The [browser
 usage](https://github.com/tonsky/FiraCode#browser-support) section of
 the Fira Code README provides a CSS URL to be used with an `@import`
 statement that you can use with the `code_font_url` argument.

 ``` r
 style_solarized_dark(
  code_font_family = "Fira Code",
  code_font_url = "https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/fira_code.css"
 )
 ```

 Remember that you need to supply either `<type>_google_font` using the
 `google_font()` helper *or both* `<type>_font_family` and
 `<type>_font_url`.

 ### Using Additional Fonts

 If you want to use additional fonts for use in [custom CSS
 definitions](#adding-custom-css), use the `extra_fonts` argument to pass
 a list of URLs or `google_font()`s. Notice that you will need to add
 custom CSS (for example, via `extra_css`) to use the fonts imported in
 `extra_fonts`.

 ``` r
 style_mono_light(
  extra_fonts = list(
    google_font("Sofia"),
    # Young Serif by uplaod.fr
    "https://cdn.jsdelivr.net/gh/uplaod/YoungSerif/fonts/webfonts/fontface.css",
  ),
  extra_css = list(
    ".title-slide h2" = list("font-family" = "Sofia"),
    blockquote = list("font-family" = "youngserifregular")
  )
 )
 ```

 ## Colors

 When designing your xaringan theme, you may have additional colors in
 your desired color palette beyond those used in the accent colors of the
 mono and duotone styles.

 The `style*()` functions in xaringanthemer include a `colors` argument
 that lets you quickly define a additional colors to use in your slides.
 This argument takes a vector of named colors

 ``` r
 colors = c(
  red = "#f34213",
  purple = "#3e2f5b",
  orange = "#ff8811",
  green = "#136f63",
  white = "#FFFFFF",
 )
 ```

 and creates CSS classes from the color name that set the text color —
 e.g. `.red` — or that set the background color — e.g. `.bg-red`. If you
 use custom CSS in your slides, the color name is also stored in a CSS
 variable — e.g. `var(--red)`.

 So slide text like this

 ``` markdown
 This **.red[simple]** .white.bg-purple[demo] 
 _.orange[shows]_ the colors .green[in action].
 ```

 will be rendered in HTML as

 <blockquote>

 This <strong><span style="color: #f34213">simple</span></strong>
 <span style="color:#FFFFFF;background-color:#3e2f5b;">demo</span>
 <em style="color:#ff8811">shows</em> the colors
 <span style="color:#136f63">in action</span>.

 </blockquote>

 Note that the color names in `colors` need to be valid CSS names, so
 `"purple-light"` will work, but `"purple light"` will not.

 ## 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(
  ".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 `style_extra_css()` separately. Just be sure to
 include your new CSS file in the list of applied files in your YAML
 header.

 ``` r
 style_extra_css(css = extra_css, outfile = "custom.css")
 ```

 ``` css
 /* Extra CSS */
 .small {
  font-size: 90%;
 }
 .full-width {
  display: flex;
  width: 100%;
  flex: 1 1 auto;
 }
 ```

 This is most helpful when wanting to define helper classes to work with
 the [remark.js](https://github.com/gnab/remark) `.class[]` syntax. Using
 the above example, we could add slide text `.small[in smaller font
 size]`.

 -----

 **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](https://github.com/yihui/xaringan). Also thanks to [Ole
 Petter Bang](http://gnab.org) for
 [remark.js](https://github.com/gnab/remark).
 ## Features

 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\!
 There’s a lot more that **xaringanthemer** can do\! [Discover
 xaringanthemer’s
 features.](https://pkg.garrickadenbuie.com/xaringanthemer/features.html)
--- a/index.Rmd
+++ b/index.Rmd
@@ -2,7 +2,7 @@
 output: github_document
 ---

 <!-- index.md is generated from index.Rmd. Please edit that file -->
 <!-- README.md is generated from README.Rmd. Please edit that file -->

 ```{r setup, include = FALSE}
 knitr::opts_chunk$set(
@@ -10,14 +10,21 @@ knitr::opts_chunk$set(
  results = "asis",
  echo = FALSE,
  comment = "#>",
  fig.path = "man/figures/README-",
  fig.path = "man/figures/index-",
  out.width = "100%"
 )
 IS_README <- TRUE
 library(xaringanthemer)
 ```

 # xaringanthemer

 <!-- badges: start -->
 [![CRAN status](https://www.r-pkg.org/badges/version/xaringanthemer)](https://CRAN.R-project.org/package=xaringanthemer)
 [![Lifecycle: stable](https://img.shields.io/badge/lifecycle-stable-brightgreen.svg)](https://www.tidyverse.org/lifecycle/#stable)
 [![travis](https://travis-ci.com/gadenbuie/xaringanthemer.svg?branch=master)](https://travis-ci.com/gadenbuie/xaringanthemer)
 [![Codecov](https://img.shields.io/codecov/c/github/gadenbuie/xaringanthemer)](https://codecov.io/github/gadenbuie/xaringanthemer)
 <!-- badges: end -->

 ```{r child="man/fragments/_tagline-gif.Rmd"}
 ```
@@ -27,11 +34,17 @@ library(xaringanthemer)
 ```{r child="man/fragments/_installation.Rmd"}
 ```

 ## Usage
 ## Quick Intro

 [theme-functions]: articles/singles/themes.html
 [theme-settings]: articles/xaringanthemer.html#theme-settings
 [template-variables]: articles/template-variables.html
 [theme-functions]: #themes
 [theme-settings]: #theme-settings
 [template-variables]: vignettes/template-variables.md
 [ggplot2]: https://ggplot2.tidyverse.org

 ```{r child="man/fragments/_quick-intro.Rmd"}
 ```

 ## Features

 There's a lot more that **xaringanthemer** can do!
 [Discover xaringanthemer's features.](https://pkg.garrickadenbuie.com/xaringanthemer/features.html)
--- a/index.md
+++ b/index.md
@@ -0,0 +1,120 @@

 <!-- README.md is generated from README.Rmd. Please edit that file -->

 # xaringanthemer

 <!-- badges: start -->

 [![CRAN
 status](https://www.r-pkg.org/badges/version/xaringanthemer)](https://CRAN.R-project.org/package=xaringanthemer)
 [![Lifecycle:
 stable](https://img.shields.io/badge/lifecycle-stable-brightgreen.svg)](https://www.tidyverse.org/lifecycle/#stable)
 [![travis](https://travis-ci.com/gadenbuie/xaringanthemer.svg?branch=master)](https://travis-ci.com/gadenbuie/xaringanthemer)
 [![Codecov](https://img.shields.io/codecov/c/github/gadenbuie/xaringanthemer)](https://codecov.io/github/gadenbuie/xaringanthemer)
 <!-- badges: end -->

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

 <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/examples.gif" alt="Animation previewing many xaringanthemer themes" />

 ## Installation

 You can install **xaringanthemer** from CRAN

 ``` r
 install.packages("xaringanthemer")
 ```

 or you can install the development version of xaringanthemer from
 [GitHub](https://github.com/gadenbuie/xaringanthemer).

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

 ## Quick Intro

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

 First, add the `xaringan-themer.css` file to the YAML header of your
 xaringan slides.

 ``` yaml
 output:
  xaringan::moon_reader:
    css: xaringan-themer.css
 ```

 Then, in a hidden chunk just after the knitr setup chunk, load
 **xaringanthemer** and try one of the [theme functions](#themes).

 ```` markdown
 ```{r xaringan-themer, include = FALSE}
 library(xaringanthemer)
 style_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")
 )
 ```
 ````

 <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_light_1c5253.png" alt="Example title and normal slides using a green xaringanthemer theme" data-external="1" />

 ### Matching ggplot Themes

 **xaringanthemer** even provides a
 [ggplot2](https://ggplot2.tidyverse.org) theme with `theme_xaringan()`
 that uses the colors and fonts from your slide theme. Built on the
 [showtext](https://github.com/yixuan/showtext) package, and designed to
 work seamlessly with [Google Fonts](https://fonts.google.com).

 Color and fill scales are also provided for matching sequential color
 scales based on the primary color used in your slides. See
 `?scale_xaringan` for more details.

 ``` r
 library(ggplot2)
 ggplot(diamonds) +
  aes(cut, fill = cut) +
  geom_bar(show.legend = FALSE) +
  labs(
    x = "Cut",
    y = "Count",
    title = "A Fancy diamonds Plot"
  ) +
  theme_xaringan(background_color = "#FFFFFF") +
  scale_xaringan_fill_discrete()
 ```

 <img src="man/figures/index-theme_xaringan_demo-1.png" width="100%" />

 ### Tab Completion

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

 <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example-rstudio-completion.gif" alt="Demonstration of argument auto-completion with RStudio" data-external="1" />

 ### R Markdown Template in RStudio

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

 <center>

 <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/rmarkdown-template-screenshot.png" alt="The 'New R Markdown Document' menu in RStudio" data-external="1" />

 </center>

 ## Features

 There’s a lot more that **xaringanthemer** can do\! [Discover
 xaringanthemer’s
 features.](https://pkg.garrickadenbuie.com/xaringanthemer/features.html)
--- a/make.R
+++ b/make.R
@@ -8,6 +8,10 @@ message("Rendering README.Rmd for GitHub")
 rmarkdown::render("README.Rmd", quiet = TRUE)
 unlink("README.html")

 message("Rendering index.Rmd for pkgdown")
 rmarkdown::render("index.Rmd", quiet = TRUE)
 unlink("index.html")

 message("Checking package")
 devtools::check(document = FALSE)

--- a/man/figures/index-theme_xaringan_demo-1.png
+++ b/man/figures/index-theme_xaringan_demo-1.png
--- a/man/fragments/_installation.Rmd
+++ b/man/fragments/_installation.Rmd
@@ -7,6 +7,6 @@ install.packages("xaringanthemer")
 or you can install the development version of xaringanthemer from [GitHub](https://github.com/gadenbuie/xaringanthemer).

 ```r
 # install.packages("devtools")
 devtools::install_github("gadenbuie/xaringanthemer")
 # install.packages("remotes")
 remotes::install_github("gadenbuie/xaringanthemer")
 ```
--- a/man/fragments/_quick-intro.Rmd
+++ b/man/fragments/_quick-intro.Rmd
@@ -1,5 +1,9 @@
 <!-- Set link to theme-settings, template-variables, theme functions -->

 ```{r include=FALSE}
 if (!exists("IS_README")) IS_README <- FALSE
 ```

 First, add the `xaringan-themer.css` file to the YAML header of your xaringan slides.

 ```yaml
@@ -22,19 +26,66 @@ style_mono_light(
 ```
 ````

 <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_light_1c5253.png" alt="Example title and normal slides using a green xaringanthemer theme" />
 <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_light_1c5253.png" alt="Example title and normal slides using a green xaringanthemer theme" data-external="1" />

 ### Matching ggplot Themes

 [showtext]: https://github.com/yixuan/showtext

 **xaringanthemer** even provides a [ggplot2] theme 
 with `theme_xaringan()`
 that uses the colors and fonts from your slide theme.
 Built on the [showtext] package,
 and designed to work seamlessly with [Google Fonts](https://fonts.google.com).

 Color and fill scales are also provided
 for matching sequential color scales based on 
 the primary color used in your slides.
 See `?scale_xaringan` for more details.

 ```{r xaringanthemer-ggplot-setup, include=FALSE, eval=IS_README}
 style_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"),
  outfile = NULL
 )
 ```

 ```{r theme_xaringan_demo, echo=TRUE, warning=FALSE, fig.width=13, fig.height=5.5, eval=IS_README}
 library(ggplot2)
 ggplot(diamonds) +
  aes(cut, fill = cut) +
  geom_bar(show.legend = FALSE) +
  labs(
    x = "Cut",
    y = "Count",
    title = "A Fancy diamonds Plot"
  ) +
  theme_xaringan(background_color = "#FFFFFF") +
  scale_xaringan_fill_discrete()
 ```

 ```{r link-to-plot-image, echo=FALSE, eval=!IS_README, results='asis'}
 if (identical(Sys.getenv("IN_PKGDOWN"), "true")) {
  cat("![](../reference/figures/index-theme_xaringan_demo-1.png)")
 } else {
  cat('<img src="../man/figures/index-theme_xaringan_demo-1.png" data-external="1" />')
 }
 ```


 ### Tab Completion

 **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!


 <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example-rstudio-completion.gif" alt="Demonstration of argument auto-completion with RStudio" />
 <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example-rstudio-completion.gif" alt="Demonstration of argument auto-completion with RStudio" data-external="1" />

 ### R Markdown Template in RStudio

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

 <center>
 <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/rmarkdown-template-screenshot.png" alt="The 'New R Markdown Document' menu in RStudio" />
 <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/rmarkdown-template-screenshot.png" alt="The 'New R Markdown Document' menu in RStudio" data-external="1" />
 </center>
--- a/man/fragments/_themes.Rmd
+++ b/man/fragments/_themes.Rmd
@@ -23,7 +23,10 @@ See the [Colors](#colors) section for more information.
 ```{r include=FALSE}
 IS_README <- exists("IS_README") && IS_README
 include_graphic <- function(img_path) {
  glue::glue("![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/{img_path})")
  glue::glue(
    '<img src="https://raw.githubusercontent.com/gadenbuie/', 
    'xaringanthemer/assets/{img_path}" data-external="1" />'
  )
 }
 ```

--- a/man/xaringanthemer-package.Rd
+++ b/man/xaringanthemer-package.Rd
@@ -16,6 +16,7 @@ Create beautifully color-cordinated and customized
 \seealso{
 Useful links:
 \itemize{
  \item \url{https://pkg.garrickadenbuie.com/xaringanthemer}
  \item \url{https://github.com/gadenbuie/xaringanthemer}
  \item Report bugs at \url{https://github.com/gadenbuie/xaringanthemer/issues}
 }
--- a/pkgdown/_pkgdown.yml
+++ b/pkgdown/_pkgdown.yml
@@ -52,7 +52,7 @@ reference:
 navbar:
  left:
    intro:
      text: Get started
      text: Features
      href: articles/xaringanthemer.html
    reference:
      text: Reference
--- a/vignettes/xaringanthemer.Rmd
+++ b/vignettes/xaringanthemer.Rmd
@@ -13,11 +13,16 @@ knitr::opts_chunk$set(
  results = "asis",
  echo = FALSE,
  comment = "#>",
  fig.path = "man/figures/README-",
  fig.path = "man/figures/index-",
  out.width = "100%"
 )
 library(xaringanthemer)
 ```

 ```{css echo=FALSE}
 img { max-width: 100%; }
 ```

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