| [xaringan]: https://github.com/yihui/xaringan | [xaringan]: https://github.com/yihui/xaringan | ||||
| [remarkjs]: https://github.com/gnab/remark | [remarkjs]: https://github.com/gnab/remark | ||||
| [template-variables]: vignettes/template-variables.md | |||||
| Easily style your [xaringan] slides with **xaringanthemer**. | Easily style your [xaringan] slides with **xaringanthemer**. | ||||
|  |  | ||||
| ```{r toc, results='asis', echo=FALSE, message=FALSE} | |||||
| ```{r toc, results='asis', echo=FALSE, message=FALSE, eval=FALSE} | |||||
| devtools::source_gist("c83e078bf8c81b035e32c3fc0cf04ee8", filename = 'render_toc.R') | devtools::source_gist("c83e078bf8c81b035e32c3fc0cf04ee8", filename = 'render_toc.R') | ||||
| x <- render_toc("README.Rmd", toc_depth = 3) | x <- render_toc("README.Rmd", toc_depth = 3) | ||||
| gsub(" -", "-", sub("^-.+?\n", "", x)) | 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) | |||||
| ## Installation | ## Installation | ||||
| **xaringanthemer** lives here on GitHub. | **xaringanthemer** lives here on GitHub. | ||||
|  |  | ||||
| **xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore](#fully-customized) the themes! | |||||
| **xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore](#fully-customized) 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> | <center><img src="vignettes/images/rmarkdown-template-screenshot.png" width="350px"></center> | ||||
| The theme functions listed above are just wrappers around the central function of this package, `write_xaringan_theme()`. | 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. | 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. | |||||
| 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. | 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 loading `xaringanthemer`, type out `duo_theme(` and then press <kbd>Tab</kbd> to see all of the theme options. | As an example, try loading `xaringanthemer`, type out `duo_theme(` and then press <kbd>Tab</kbd> to see all of the theme options. | ||||
|  |  | ||||
| **xaringanthemer** is <kbd>Tab</kbd> friendly – [use autocomplete to | **xaringanthemer** is <kbd>Tab</kbd> friendly – [use autocomplete to | ||||
| explore](#fully-customized) the | |||||
| explore](#fully-customized) the [template | |||||
| variables](vignettes/template-variables.md) that you can adjust in each | |||||
| of the | |||||
| themes\! | themes\! | ||||
| <center> | <center> | ||||
| from the default **xaringan** theme and make a few modifications, start | from the default **xaringan** theme and make a few modifications, start | ||||
| there. | 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. | |||||
| 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 loading `xaringanthemer`, type out `duo_theme(` and | As an example, try loading `xaringanthemer`, type out `duo_theme(` and | ||||
| then press <kbd>Tab</kbd> to see all of the theme options. | then press <kbd>Tab</kbd> to see all of the theme options. |
|  |  | ||||
| ```{r toc, results='asis', echo=FALSE, message=FALSE} | |||||
| ```{r toc, results='asis', echo=FALSE, message=FALSE, eval=FALSE} | |||||
| devtools::source_gist("c83e078bf8c81b035e32c3fc0cf04ee8", filename = 'render_toc.R') | devtools::source_gist("c83e078bf8c81b035e32c3fc0cf04ee8", filename = 'render_toc.R') | ||||
| x <- render_toc("readme-vignette.Rmd", toc_depth = 3) | |||||
| x <- render_toc("README.Rmd", toc_depth = 3) | |||||
| gsub(" -", "-", sub("^-.+?\n", "", x)) | 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) | |||||
| ## Quick Intro | ## Quick Intro | ||||
| First, add `css: xaringan-themer.css` to your xaringan slides YAML header under `xaringan::moonreader:`. | First, add `css: xaringan-themer.css` to your xaringan slides YAML header under `xaringan::moonreader:`. | ||||
|  |  | ||||
| **xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore](#fully-customized) the themes! | |||||
| **xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore](#fully-customized) 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> | <center><img src="images/rmarkdown-template-screenshot.png" width="350px"></center> | ||||
| 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. | 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. | 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")`. | |||||
| As an example, try loading `xaringanthemer`, type out `duo_theme(` and then press <kbd>Tab</kbd> to see all of the theme options. | As an example, try loading `xaringanthemer`, type out `duo_theme(` and then press <kbd>Tab</kbd> to see all of the theme options. | ||||
| title: "Template Variables" | title: "Template Variables" | ||||
| author: "Garrick Aden-Buie" | author: "Garrick Aden-Buie" | ||||
| date: "`r Sys.Date()`" | date: "`r Sys.Date()`" | ||||
| output: rmarkdown::html_vignette | |||||
| output: | |||||
| rmarkdown::html_vignette: default | |||||
| vignette: > | vignette: > | ||||
| %\VignetteIndexEntry{Template Variables} | %\VignetteIndexEntry{Template Variables} | ||||
| %\VignetteEngine{knitr::rmarkdown} | |||||
| %\VignetteEncoding{UTF-8} | %\VignetteEncoding{UTF-8} | ||||
| %\VignetteEngine{knitr::rmarkdown} | |||||
| --- | --- | ||||
| ```{r setup, include = FALSE} | ```{r setup, include = FALSE} |
| 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 | |||||
| property is applied, and a brief description of the template variable. | |||||
| For example, `background_color` by default sets the `background-color` | |||||
| CSS property of the `.remark-slide-content` class to `#FFF`. | |||||
| Use this table to find the template variable you would like to modify. | |||||
| You can also use this table to find the CSS class or element associated | |||||
| with a particular template item. | |||||
| Note that themes, like `mono_accent()`, have additional parameters, but | |||||
| with any theme function you can override the theme by directly setting | |||||
| the arguments below when calling the theme function. For example, to use | |||||
| `mono_accent()` with a different slide background color, you can call | |||||
| `mono_accent(background_color = | |||||
| "#abc123")`. | |||||
| | variable | default | element | description | | |||||
| | :-------------------------------- | :------------------------------------------------------------------------------ | :------------------------------------------------------- | :-------------------------------------------------------------------------------- | | |||||
| | `text_color` | `#000` | body | Text Color | | |||||
| | `header_color` | `#000` | h1, h2, h3 | Header Color | | |||||
| | `background_color` | `#FFF` | .remark-slide-content | Slide Background Color | | |||||
| | `link_color` | `rgb(249, 38, 114)` | a, a \> code | Link Color | | |||||
| | `text_bold_color` | `NA` | strong | Bold Text Color | | |||||
| | `text_slide_number_color` | `inverse_background_color` | .remark-slide-number | Slide Number Color | | |||||
| | `code_highlight_color` | `rgba(255,255,0,0.5)` | .remark-code-line-highlighted | Code Line Highlight | | |||||
| | `code_inline_color` | `#000` | .remark-inline-code | Inline Code Color | | |||||
| | `code_inline_background_color` | `NA` | .remark-inline-code | Inline Code Background Color | | |||||
| | `code_inline_font_size` | `1em` | .remark-inline-code | Inline Code Text Font Size | | |||||
| | `inverse_background_color` | `#272822` | .inverse | Inverse Background Color | | |||||
| | `inverse_text_color` | `#d6d6d6` | .inverse | Inverse Text Color | | |||||
| | `inverse_text_shadow` | `FALSE` | .inverse | Enables Shadow on text of inverse slides | | |||||
| | `inverse_header_color` | `#f3f3f3` | .inverse h1, .inverse h2, .inverse h3 | Inverse Header Color | | |||||
| | `title_slide_text_color` | `inverse_text_color` | .title-slide | Title Slide Text Color | | |||||
| | `title_slide_background_color` | `inverse_background_color` | .title-slide | Title Slide Background Color | | |||||
| | `title_slide_background_image` | `NA` | .title-slide | Title Slide Background Image URL | | |||||
| | `title_slide_background_size` | `NA` | .title-slide | Title Slide Background Image Size, defaults to “cover” if background image is set | | |||||
| | `title_slide_background_position` | `NA` | .title-slide | Title Slide Background Image Position | | |||||
| | `footnote_color` | `NA` | .footnote | Footnote text color (if `NA`, then it will be the same color as `text_color`) | | |||||
| | `footnote_font_size` | `0.9em` | .footnote | Footnote font size | | |||||
| | `footnote_position_bottom` | `3em` | .footnote | Footnote location from bottom of screen | | |||||
| | `left_column_subtle_color` | `#777` | .left-column h2, .left-column h3 | Left Column Text (not last) | | |||||
| | `left_column_selected_color` | `#000` | .left-column h2:last-of-type, .left-column h3:last-child | Left Column Current Selection | | |||||
| | `blockquote_left_color` | `lightgray` | blockquote | Blockquote Left Border Color | | |||||
| | `table_border_color` | `#666` | table: border-top, border-bottom | Table top/bottom border | | |||||
| | `table_row_border_color` | `#ddd` | table thead th: border-bottom | Table row inner bottom border | | |||||
| | `table_row_even_background_color` | `#eee` | thead, tfoot, tr:nth-child(even) | Table Even Row Background Color | | |||||
| | `text_font_size` | `20px` | .remark-slide-content | Slide Body Text Font Size | | |||||
| | `header_h1_font_size` | `55px` | .remark-slide-content h1 | h1 Header Text Font Size | | |||||
| | `header_h2_font_size` | `45px` | .remark-slide-content h2 | h2 Header Text Font Size | | |||||
| | `header_h3_font_size` | `35px` | .remark-slide-content h3 | h3 Header Text Font Size | | |||||
| | `text_slide_number_font_size` | `0.9em` | .remark-slide-number | Slide Number Text Font Size | | |||||
| | `text_font_google` | `NULL` | body | Use `google_font()` to specify body font | | |||||
| | `text_font_family` | `'Droid Serif'` | body | Body Text Font Family | | |||||
| | `text_font_weight` | `normal` | body | Body Text Font Weight | | |||||
| | `text_font_url` | `https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic` | @import url() | Body Text Font URL(s) | | |||||
| | `text_font_family_fallback` | `'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC'` | body | Body Text Font Fallbacks | | |||||
| | `text_font_base` | `serif` | body | Body Text Base Font (Total Failure Fallback) | | |||||
| | `header_font_google` | `NULL` | body | Use `google_font()` to specify header font | | |||||
| | `header_font_family` | `'Yanone Kaffeesatz'` | h1, h2, h3 | Header Font Family | | |||||
| | `header_font_weight` | `normal` | h1, h2, h3 | Header Font Weight | | |||||
| | `header_font_url` | `https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz` | @import url | Header Font URL | | |||||
| | `code_font_google` | `NULL` | body | Use `google_font()` to specify code font | | |||||
| | `code_font_family` | `'Source Code Pro'` | .remark-code, .remark-inline-code | Code Font Family | | |||||
| | `code_font_size` | `0.9em` | .remark-inline | Code Text Font Size | | |||||
| | `code_font_url` | `https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700` | @import url | Code Font URL | | |||||
| | `code_font_family_fallback` | `'Lucida Console', Monaco` | .remark-code, .remark-inline-code | Code Font Fallback | |