garrick
/
xaringanthemer
kopia lustrzana https://github.com/gadenbuie/xaringanthemer.git
Obserwuj 1
Polub 0
Forkuj 0
Kod Zgłoszenia 0 Wydania 10 Wiki Aktywność
😎 Give your xaringan slides some style
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
517 Commity
5 Gałęzie
Drzewo: c112855b3f
Gałęzie Tagi
${ item.name }
Utwórz gałąź ${ searchTerm }
z 'c112855b3f'
${ noResults }
xaringanthemer/dev/articles/xaringanthemer.html

542 lines
40KB
Czysty Wina Historia 

  1. <!DOCTYPE html>

  2. <!-- Generated by pkgdown: do not edit by hand --><html lang="en">

  3. <head>

  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  5. <meta charset="utf-8">

  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">

  7. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  8. <title>Xaringan CSS Theme Generator • xaringanthemer</title>

  9. <!-- favicons --><link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png">

  10. <link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">

  11. <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="../apple-touch-icon.png">

  12. <link rel="apple-touch-icon" type="image/png" sizes="120x120" href="../apple-touch-icon-120x120.png">

  13. <link rel="apple-touch-icon" type="image/png" sizes="76x76" href="../apple-touch-icon-76x76.png">

  14. <link rel="apple-touch-icon" type="image/png" sizes="60x60" href="../apple-touch-icon-60x60.png">

  15. <script src="../deps/jquery-3.6.0/jquery-3.6.0.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  16. <link href="../deps/bootstrap-5.3.1/bootstrap.min.css" rel="stylesheet">

  17. <script src="../deps/bootstrap-5.3.1/bootstrap.bundle.min.js"></script><link href="../deps/IBM_Plex_Mono-0.4.9/font.css" rel="stylesheet">

  18. <link href="../deps/Outfit-0.4.9/font.css" rel="stylesheet">

  19. <link href="../deps/font-awesome-6.4.2/css/all.min.css" rel="stylesheet">

  20. <link href="../deps/font-awesome-6.4.2/css/v4-shims.min.css" rel="stylesheet">

  21. <script src="../deps/headroom-0.11.0/headroom.min.js"></script><script src="../deps/headroom-0.11.0/jQuery.headroom.min.js"></script><script src="../deps/bootstrap-toc-1.0.1/bootstrap-toc.min.js"></script><script src="../deps/clipboard.js-2.0.11/clipboard.min.js"></script><script src="../deps/search-1.0.0/autocomplete.jquery.min.js"></script><script src="../deps/search-1.0.0/fuse.min.js"></script><script src="../deps/search-1.0.0/mark.min.js"></script><!-- pkgdown --><script src="../pkgdown.js"></script><link href="../extra.css" rel="stylesheet">

  22. <meta property="og:title" content="Xaringan CSS Theme Generator">

  23. <meta name="robots" content="noindex">

  24. </head>

  25. <body>

  26.     <a href="#main" class="visually-hidden-focusable">Skip to contents</a>

  27. 

  28. 

  29.     <nav class="navbar navbar-expand-lg fixed-top bg-light" data-bs-theme="light" aria-label="Site navigation"><div class="container">

  30. 

  31.     <a class="navbar-brand me-2" href="../index.html">xaringanthemer</a>

  32. 

  33.     <small class="nav-text text-danger me-auto" data-bs-toggle="tooltip" data-bs-placement="bottom" title="In-development version">0.4.2.9000</small>

  34. 

  35. 

  36.     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">

  37.       <span class="navbar-toggler-icon"></span>

  38.     </button>

  39. 

  40.     <div id="navbar" class="collapse navbar-collapse ms-3">

  41.       <ul class="navbar-nav me-auto">

  42. <li class="active nav-item"><a class="nav-link" href="../articles/xaringanthemer.html">Features</a></li>

  43. <li class="nav-item"><a class="nav-link" href="../reference/index.html">Reference</a></li>

  44. <li class="nav-item dropdown">

  45.   <button class="nav-link dropdown-toggle" type="button" id="dropdown-themes" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">Themes</button>

  46.   <ul class="dropdown-menu" aria-labelledby="dropdown-themes">

  47. <li><h6 class="dropdown-header" data-toc-skip>Themes</h6></li>

  48.     <li><a class="dropdown-item" href="../articles/themes.html">Slide Themes</a></li>

  49.     <li><a class="dropdown-item" href="../articles/ggplot2-themes.html">ggplot2 Themes</a></li>

  50.     <li><hr class="dropdown-divider"></li>

  51.     <li><h6 class="dropdown-header" data-toc-skip>More Customization</h6></li>

  52.     <li><a class="dropdown-item" href="../articles/fonts.html">Fonts</a></li>

  53.     <li><a class="dropdown-item" href="../articles/template-variables.html">Template Variables</a></li>

  54.   </ul>

  55. </li>

  56.       </ul>

  57. <ul class="navbar-nav">

  58. <li class="nav-item dropdown">

  59.   <button class="nav-link dropdown-toggle" type="button" id="dropdown-" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true"><span class="fa far fa-newspaper fa-lg"></span> </button>

  60.   <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdown-">

  61. <li><a class="external-link dropdown-item" href="https://garrickadenbuie.com/blog/xaringanthemer-v0-3-0/">xaringanthemer 0.3.0</a></li>

  62.     <li><hr class="dropdown-divider"></li>

  63.     <li><a class="dropdown-item" href="../news/index.html">Changelog</a></li>

  64.   </ul>

  65. </li>

  66. <li class="nav-item"><a class="external-link nav-link" href="https://github.com/gadenbuie/xaringanthemer"><span class="fa fab fa-github fa-lg"></span></a></li>

  67. <li class="nav-item"><a class="external-link nav-link" href="https://twitter.com/grrrck"><span class="fa fab fa-twitter fa-lg"></span></a></li>

  68. <li class="nav-item"><a class="external-link nav-link" href="https://www.garrickadenbuie.com"><span class="fa fas fa-home fa-lg"></span></a></li>

  69.       </ul>

  70. </div>

  71. 

  72. 

  73.   </div>

  74. </nav><div class="container template-article">

  75. 

  76. 

  77. 

  78. 

  79. <div class="row">

  80.   <main id="main" class="col-md-9"><div class="page-header">

  81.       <img src="../logo.png" class="logo" alt=""><h1>Xaringan CSS Theme Generator</h1>

  82.             

  83.       

  84.       <small class="dont-index">Source: <a href="https://github.com/gadenbuie/xaringanthemer/blob/main/vignettes/xaringanthemer.Rmd" class="external-link"><code>vignettes/xaringanthemer.Rmd</code></a></small>

  85.       <div class="d-none name"><code>xaringanthemer.Rmd</code></div>

  86.     </div>

  87. 

  88.     

  89.     

  90. <style type="text/css">

  91. img { max-width: 100%; }

  92. </style>

  93. <p>Jump to: <a href="#quick-intro">Quick Intro</a>, <a href="#themes">Themes</a>, <a href="#theme-settings">Theme Settings</a>,

  94. <a href="#fonts">Fonts</a>, <a href="#colors">Colors</a>, <a href="#adding-custom-css">Adding Custom CSS</a></p>

  95. <div class="section level2">

  96. <h2 id="quick-intro">Quick Intro<a class="anchor" aria-label="anchor" href="#quick-intro"></a>

  97. </h2>

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

  99. <p>First, add the <code>xaringan-themer.css</code> file to the YAML

  100. header of your xaringan slides.</p>

  101. <div class="sourceCode" id="cb1"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb1-1"><a href="#cb1-1" tabindex="-1"></a><span class="fu">output</span><span class="kw">:</span></span>

  102. <span id="cb1-2"><a href="#cb1-2" tabindex="-1"></a><span class="at">  xaringan:</span><span class="fu">:moon_reader</span><span class="kw">:</span></span>

  103. <span id="cb1-3"><a href="#cb1-3" tabindex="-1"></a><span class="at">    </span><span class="fu">css</span><span class="kw">:</span><span class="at"> xaringan-themer.css</span></span></code></pre></div>

  104. <p>Then, in a hidden chunk just after the knitr setup chunk, load

  105. <strong>xaringanthemer</strong> and try one of the <a href="#themes">theme functions</a>.</p>

  106. <div class="sourceCode" id="cb2"><pre class="sourceCode markdown"><code class="sourceCode markdown"><span id="cb2-1"><a href="#cb2-1" tabindex="-1"></a><span class="in">```{r xaringan-themer, include=FALSE, warning=FALSE}</span></span>

  107. <span id="cb2-2"><a href="#cb2-2" tabindex="-1"></a><span class="in">library(xaringanthemer)</span></span>

  108. <span id="cb2-3"><a href="#cb2-3" tabindex="-1"></a><span class="in">style_mono_accent(</span></span>

  109. <span id="cb2-4"><a href="#cb2-4" tabindex="-1"></a><span class="in">  base_color = "#1c5253",</span></span>

  110. <span id="cb2-5"><a href="#cb2-5" tabindex="-1"></a><span class="in">  header_font_google = google_font("Josefin Sans"),</span></span>

  111. <span id="cb2-6"><a href="#cb2-6" tabindex="-1"></a><span class="in">  text_font_google   = google_font("Montserrat", "300", "300i"),</span></span>

  112. <span id="cb2-7"><a href="#cb2-7" tabindex="-1"></a><span class="in">  code_font_google   = google_font("Fira Mono")</span></span>

  113. <span id="cb2-8"><a href="#cb2-8" tabindex="-1"></a><span class="in">)</span></span>

  114. <span id="cb2-9"><a href="#cb2-9" tabindex="-1"></a><span class="in">```</span></span></code></pre></div>

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

  116. <div class="section level3">

  117. <h3 id="matching-ggplot-themes">Matching ggplot Themes<a class="anchor" aria-label="anchor" href="#matching-ggplot-themes"></a>

  118. </h3>

  119. <p><strong>xaringanthemer</strong> even provides a [ggplot2] theme with

  120. <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> that uses the colors and fonts from your

  121. slide theme. Built on the <a href="https://github.com/yixuan/showtext" class="external-link">showtext</a> package, and

  122. designed to work seamlessly with <a href="https://fonts.google.com" class="external-link">Google Fonts</a>.</p>

  123. <p>Color and fill scales are also provided for matching sequential color

  124. scales based on the primary color used in your slides. See

  125. <code><a href="../reference/scale_xaringan.html">?scale_xaringan</a></code> for more details.</p>

  126. <p>More details and examples can be found in

  127. <code><a href="../articles/ggplot2-themes.html">vignette("ggplot2-themes")</a></code>.</p>

  128. <div class="sourceCode" id="cb3"><pre class="downlit sourceCode r">

  129. <code class="sourceCode R"><span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://ggplot2.tidyverse.org" class="external-link">ggplot2</a></span><span class="op">)</span></span>

  130. <span><span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html" class="external-link">ggplot</a></span><span class="op">(</span><span class="va">diamonds</span><span class="op">)</span> <span class="op">+</span></span>

  131. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html" class="external-link">aes</a></span><span class="op">(</span><span class="va">cut</span>, fill <span class="op">=</span> <span class="va">cut</span><span class="op">)</span> <span class="op">+</span></span>

  132. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_bar.html" class="external-link">geom_bar</a></span><span class="op">(</span>show.legend <span class="op">=</span> <span class="cn">FALSE</span><span class="op">)</span> <span class="op">+</span></span>

  133. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html" class="external-link">labs</a></span><span class="op">(</span></span>

  134. <span>    x <span class="op">=</span> <span class="st">"Cut"</span>,</span>

  135. <span>    y <span class="op">=</span> <span class="st">"Count"</span>,</span>

  136. <span>    title <span class="op">=</span> <span class="st">"A Fancy diamonds Plot"</span></span>

  137. <span>  <span class="op">)</span> <span class="op">+</span></span>

  138. <span>  <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span>background_color <span class="op">=</span> <span class="st">"#FFFFFF"</span><span class="op">)</span> <span class="op">+</span></span>

  139. <span>  <span class="fu"><a href="../reference/scale_xaringan.html">scale_xaringan_fill_discrete</a></span><span class="op">(</span><span class="op">)</span></span></code></pre></div>

  140. <p><img src="../reference/figures/index-theme_xaringan_demo-1.png"></p>

  141. </div>

  142. <div class="section level3">

  143. <h3 id="tab-completion">Tab Completion<a class="anchor" aria-label="anchor" href="#tab-completion"></a>

  144. </h3>

  145. <p><strong>xaringanthemer</strong> is <kbd>Tab</kbd> friendly – <a href="#theme-settings">use autocomplete to explore</a> the <a href="template-variables.html">template variables</a> that you can

  146. adjust in each of the themes!</p>

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

  148. </div>

  149. <div class="section level3">

  150. <h3 id="r-markdown-template-in-rstudio">R Markdown Template in RStudio<a class="anchor" aria-label="anchor" href="#r-markdown-template-in-rstudio"></a>

  151. </h3>

  152. <p>You can also skip the above and just create a <em>Ninja Themed

  153. Presentation</em> from the New R Markdown Document menu in RStudio.</p>

  154. <center>

  155. <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">

  156. </center>

  157. </div>

  158. </div>

  159. <div class="section level2">

  160. <h2 id="themes">Themes<a class="anchor" aria-label="anchor" href="#themes"></a>

  161. </h2>

  162. <p><strong>xaringanthemer</strong> includes a number of functions that

  163. provide themed <strong>xaringan</strong> styles. All of the styling

  164. functions start with the <code>style_</code> prefix.</p>

  165. <p>The goal of each style function is to quickly set up a coordinated

  166. color palette for your slides based on one or two starter colors. Styles

  167. based on one color start with <code>style_mono_</code> and styles based

  168. on two colors start with <code>style_duo_</code>. How the starter colors

  169. are used is described in the final portion of the style function name.

  170. For example, <code><a href="../reference/style_mono_accent.html">style_mono_accent()</a></code> uses a single color as an

  171. accent color.</p>

  172. <p>Note that the colors used below are for demonstration only, the point

  173. of the <code>style_</code> functions is for you to choose your own color

  174. palette!</p>

  175. <p>If your color palette uses more than two colors, you can add

  176. additional colors with the <code>colors</code> argument. See the <a href="#colors">Colors</a> section for more information.</p>

  177. <div class="section level3">

  178. <h3 id="monotone">Monotone<a class="anchor" aria-label="anchor" href="#monotone"></a>

  179. </h3>

  180. <p>Use these functions to automatically create a consistent color

  181. palette for your slides, based around a single color.</p>

  182. <div class="section level4">

  183. <h4 id="style_mono_light">

  184. <code>style_mono_light()</code><a class="anchor" aria-label="anchor" href="#style_mono_light"></a>

  185. </h4>

  186. <p>A light theme based around a single color.</p>

  187. <div class="sourceCode" id="cb4"><pre class="downlit sourceCode r">

  188. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_mono_light.html">style_mono_light</a></span><span class="op">(</span>base_color <span class="op">=</span> <span class="st">"#23395b"</span><span class="op">)</span></span></code></pre></div>

  189. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_light.png" data-external="1"></p>

  190. </div>

  191. <div class="section level4">

  192. <h4 id="style_mono_dark">

  193. <code>style_mono_dark()</code><a class="anchor" aria-label="anchor" href="#style_mono_dark"></a>

  194. </h4>

  195. <p>A dark theme based around a single color.</p>

  196. <div class="sourceCode" id="cb5"><pre class="downlit sourceCode r">

  197. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_mono_dark.html">style_mono_dark</a></span><span class="op">(</span>base_color <span class="op">=</span> <span class="st">"#cbf7ed"</span><span class="op">)</span></span></code></pre></div>

  198. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_dark.png" data-external="1"></p>

  199. </div>

  200. <div class="section level4">

  201. <h4 id="style_mono_accent">

  202. <code>style_mono_accent()</code><a class="anchor" aria-label="anchor" href="#style_mono_accent"></a>

  203. </h4>

  204. <p>The default xaringan theme with a single color used for color accents

  205. on select elements (headers, bold text, etc.).</p>

  206. <div class="sourceCode" id="cb6"><pre class="downlit sourceCode r">

  207. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_mono_accent.html">style_mono_accent</a></span><span class="op">(</span>base_color <span class="op">=</span> <span class="st">"#43418A"</span><span class="op">)</span></span></code></pre></div>

  208. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_accent.png" data-external="1"></p>

  209. </div>

  210. <div class="section level4">

  211. <h4 id="style_mono_accent_inverse">

  212. <code>style_mono_accent_inverse()</code><a class="anchor" aria-label="anchor" href="#style_mono_accent_inverse"></a>

  213. </h4>

  214. <p>An “inverted” default xaringan theme with a single color used for

  215. color accents on select elements (headers, bold text, etc.).</p>

  216. <div class="sourceCode" id="cb7"><pre class="downlit sourceCode r">

  217. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_mono_accent_inverse.html">style_mono_accent_inverse</a></span><span class="op">(</span>base_color <span class="op">=</span> <span class="st">"#3C989E"</span><span class="op">)</span></span></code></pre></div>

  218. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_accent_inverse.png" data-external="1"></p>

  219. </div>

  220. </div>

  221. <div class="section level3">

  222. <h3 id="duotone">Duotone<a class="anchor" aria-label="anchor" href="#duotone"></a>

  223. </h3>

  224. <p>These themes build from two (ideally) complementary colors.</p>

  225. <div class="section level4">

  226. <h4 id="style_duo">

  227. <code>style_duo()</code><a class="anchor" aria-label="anchor" href="#style_duo"></a>

  228. </h4>

  229. <p>A two-colored theme based on a primary and secondary color.</p>

  230. <div class="sourceCode" id="cb8"><pre class="downlit sourceCode r">

  231. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_duo.html">style_duo</a></span><span class="op">(</span>primary_color <span class="op">=</span> <span class="st">"#1F4257"</span>, secondary_color <span class="op">=</span> <span class="st">"#F97B64"</span><span class="op">)</span></span></code></pre></div>

  232. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo.png" data-external="1"></p>

  233. </div>

  234. <div class="section level4">

  235. <h4 id="style_duo_accent">

  236. <code>style_duo_accent()</code><a class="anchor" aria-label="anchor" href="#style_duo_accent"></a>

  237. </h4>

  238. <p>The default Xaringan theme with two accent colors.</p>

  239. <div class="sourceCode" id="cb9"><pre class="downlit sourceCode r">

  240. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_duo_accent.html">style_duo_accent</a></span><span class="op">(</span>primary_color <span class="op">=</span> <span class="st">"#035AA6"</span>, secondary_color <span class="op">=</span> <span class="st">"#03A696"</span><span class="op">)</span></span></code></pre></div>

  241. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo_accent.png" data-external="1"></p>

  242. </div>

  243. <div class="section level4">

  244. <h4 id="style_duo_accent_inverse">

  245. <code>style_duo_accent_inverse()</code><a class="anchor" aria-label="anchor" href="#style_duo_accent_inverse"></a>

  246. </h4>

  247. <p>An “inverted” default Xaringan theme with two accent colors.</p>

  248. <div class="sourceCode" id="cb10"><pre class="downlit sourceCode r">

  249. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_duo_accent_inverse.html">style_duo_accent_inverse</a></span><span class="op">(</span>primary_color <span class="op">=</span> <span class="st">"#035AA6"</span>, secondary_color <span class="op">=</span> <span class="st">"#03A696"</span><span class="op">)</span></span></code></pre></div>

  250. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo_accent_inverse.png" data-external="1"></p>

  251. </div>

  252. </div>

  253. <div class="section level3">

  254. <h3 id="solarized">Solarized<a class="anchor" aria-label="anchor" href="#solarized"></a>

  255. </h3>

  256. <p>There are also two themes based around the <a href="https://ethanschoonover.com/solarized/" class="external-link">solarized color

  257. palette</a>, <code><a href="../reference/style_solarized_light.html">style_solarized_light()</a></code> and

  258. <code><a href="../reference/style_solarized_dark.html">style_solarized_dark()</a></code>. For both themes, it is advisted to

  259. change the syntax highlighting theme to <code>solarized-light</code> or

  260. <code>solarized-dark</code> (looks great paired or constrasted).</p>

  261. <div class="section level4">

  262. <h4 id="style_solarized_light">

  263. <code>style_solarized_light()</code><a class="anchor" aria-label="anchor" href="#style_solarized_light"></a>

  264. </h4>

  265. <div class="sourceCode" id="cb11"><pre class="downlit sourceCode r">

  266. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_solarized_light.html">style_solarized_light</a></span><span class="op">(</span><span class="op">)</span></span></code></pre></div>

  267. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_solarized_light.png" data-external="1"></p>

  268. </div>

  269. <div class="section level4">

  270. <h4 id="style_solarized_dark">

  271. <code>style_solarized_dark()</code><a class="anchor" aria-label="anchor" href="#style_solarized_dark"></a>

  272. </h4>

  273. <div class="sourceCode" id="cb12"><pre class="downlit sourceCode r">

  274. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_solarized_dark.html">style_solarized_dark</a></span><span class="op">(</span><span class="op">)</span></span></code></pre></div>

  275. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_solarized_dark.png" data-external="1"></p>

  276. <p>To do this, your YAML header should look more-or-less like this:</p>

  277. <div class="sourceCode" id="cb13"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb13-1"><a href="#cb13-1" tabindex="-1"></a><span class="fu">output</span><span class="kw">:</span></span>

  278. <span id="cb13-2"><a href="#cb13-2" tabindex="-1"></a><span class="at">  xaringan:</span><span class="fu">:moon_reader</span><span class="kw">:</span></span>

  279. <span id="cb13-3"><a href="#cb13-3" tabindex="-1"></a><span class="at">    </span><span class="fu">css</span><span class="kw">:</span><span class="at"> </span><span class="kw">[</span><span class="st">"xaringan-themer.css"</span><span class="kw">]</span></span>

  280. <span id="cb13-4"><a href="#cb13-4" tabindex="-1"></a><span class="at">    </span><span class="fu">nature</span><span class="kw">:</span></span>

  281. <span id="cb13-5"><a href="#cb13-5" tabindex="-1"></a><span class="at">      </span><span class="fu">highlightStyle</span><span class="kw">:</span><span class="at"> solarized-dark</span></span>

  282. <span id="cb13-6"><a href="#cb13-6" tabindex="-1"></a><span class="at">      </span><span class="fu">highlightLines</span><span class="kw">:</span><span class="at"> </span><span class="ch">true</span></span>

  283. <span id="cb13-7"><a href="#cb13-7" tabindex="-1"></a><span class="at">      </span><span class="fu">countIncrementalSlides</span><span class="kw">:</span><span class="at"> </span><span class="ch">false</span></span></code></pre></div>

  284. </div>

  285. </div>

  286. </div>

  287. <div class="section level2">

  288. <h2 id="theme-settings">Theme Settings<a class="anchor" aria-label="anchor" href="#theme-settings"></a>

  289. </h2>

  290. <p>The theme functions listed above are just wrappers around the central

  291. function of this package, <code><a href="../reference/style_xaringan.html">style_xaringan()</a></code>. If you want to

  292. start from the default <strong>xaringan</strong> theme and make a few

  293. modifications, start there.</p>

  294. <p>All of the theme template variables are repeated in each of the theme

  295. functions (instead of relying on <code>...</code>) so that you can use

  296. autocompletion to find and change the defaults for any theme function.

  297. To override the default value of any theme functions, set the

  298. appropriate argument in the theme function. A table of all template

  299. variables is included in <a href="template-variables.html"><code>vignette("template-variables", "xaringanthemer")</code></a>.</p>

  300. <p>As an example, try loading <code>xaringanthemer</code>, type out

  301. <code>style_duo_theme(</code> and then press <kbd>Tab</kbd> to see all

  302. of the theme options.</p>

  303. <p>All of the theme options are named so that you first think of the

  304. element you want to change, then the property of that element.</p>

  305. <p>Here are some of the <code>text_</code> theme options:</p>

  306. <ul>

  307. <li><code>text_color</code></li>

  308. <li><code>text_bold_color</code></li>

  309. <li><code>text_slide_number_color</code></li>

  310. <li><code>text_font_size</code></li>

  311. <li><code>text_slide_number_font_size</code></li>

  312. <li><em>and more …</em></li>

  313. </ul>

  314. <p>And here are the title slide theme options:</p>

  315. <ul>

  316. <li><code>title_slide_text_color</code></li>

  317. <li><code>title_slide_background_color</code></li>

  318. <li><code>title_slide_background_image</code></li>

  319. <li><code>title_slide_background_size</code></li>

  320. <li><code>title_slide_background_position</code></li>

  321. </ul>

  322. </div>

  323. <div class="section level2">

  324. <h2 id="fonts">Fonts<a class="anchor" aria-label="anchor" href="#fonts"></a>

  325. </h2>

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

  327. <p><link href="https://fonts.googleapis.com/css2?family=Cabin:wght@600&amp;family=Noto+Sans&amp;display=swap" rel="stylesheet"></p>

  328. <style type="text/css">

  329. .cabin {

  330.   font-family: Cabin;

  331.   font-weight: 600

  332. }

  333. .noto-sans {

  334.   font-family: 'Noto Sans';

  335. }

  336. .font-preview {

  337.   padding: 1em;

  338.   margin-top: 1em;

  339.   margin-bottom: 1em;

  340.   border: 1px solid #dddddd;

  341.   border-radius: 3px;

  342.   font-size: 1.25em;

  343. }

  344. </style>

  345. <div class="section level3">

  346. <h3 id="default-fonts">Default Fonts<a class="anchor" aria-label="anchor" href="#default-fonts"></a>

  347. </h3>

  348. <p>The default heading and body fonts used in

  349. <strong>xaringanthemer</strong> are different than the xaringan default

  350. fonts. In xaringanthemer, <a href="https://fonts.google.com/specimen/Cabin" class="external-link">Cabin</a> is used for

  351. headings and <a href="https://fonts.google.com/specimen/Noto+Sans" class="external-link">Noto

  352. Sans</a> for body text.</p>

  353. <div class="font-preview">

  354. <p style="font-size: 1.5em" class="cabin">

  355. A Cabin in the Clearing

  356. </p>

  357. <p class="noto-sans">

  358. Pack my box with five dozen liquor jugs. Amazingly few discotheques

  359. provide jukeboxes.

  360. </p>

  361. </div>

  362. <p>These fonts are easier to read on screens and at a distance during

  363. presentations, and they support a wide variety of languages and weights.

  364. Another reason for the change is that the xaringan (remarkjs) default

  365. body font, <em>Droid Serif</em>, is no longer officially included in

  366. Google Fonts.</p>

  367. <p>If you would like to use the fonts from the <a href="https://slides.yihui.org/xaringan/" class="external-link">default xaringan theme</a>,

  368. you can use the following arguments in your style function.</p>

  369. <div class="sourceCode" id="cb14"><pre class="downlit sourceCode r">

  370. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_xaringan.html">style_xaringan</a></span><span class="op">(</span></span>

  371. <span>  text_font_family <span class="op">=</span> <span class="st">"Droid Serif"</span>,</span>

  372. <span>  text_font_url <span class="op">=</span> <span class="st">"https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic"</span>,</span>

  373. <span>  header_font_google <span class="op">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span><span class="op">(</span><span class="st">"Yanone Kaffeesatz"</span><span class="op">)</span></span>

  374. <span><span class="op">)</span></span></code></pre></div>

  375. </div>

  376. <div class="section level3">

  377. <h3 id="custom-and-google-font-fonts">Custom and <em>Google Font</em> Fonts<a class="anchor" aria-label="anchor" href="#custom-and-google-font-fonts"></a>

  378. </h3>

  379. <p><strong>xaringanthemer</strong> makes it easy to use <a href="https://fonts.google.com" class="external-link">Google Fonts</a> in your presentations

  380. (provided you have an internet connection during the presentation) or to

  381. fully specify your font files.</p>

  382. <p>To use <a href="https://fonts.google.com" class="external-link">Google Fonts</a>, set the

  383. <code>&lt;type&gt;_font_google</code> theme arguments –

  384. <code>text_font_google</code>, <code>header_font_google</code>,

  385. <code>code_font_google</code> — using the <code><a href="../reference/google_font.html">google_font()</a></code>

  386. helper. The help documentation in <code><a href="../reference/google_font.html">?google_font</a></code> provides

  387. more info.</p>

  388. <div class="sourceCode" id="cb15"><pre class="downlit sourceCode r">

  389. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_mono_light.html">style_mono_light</a></span><span class="op">(</span></span>

  390. <span>  header_font_google <span class="op">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span><span class="op">(</span><span class="st">"Josefin Slab"</span>, <span class="st">"600"</span><span class="op">)</span>,</span>

  391. <span>  text_font_google   <span class="op">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span><span class="op">(</span><span class="st">"Work Sans"</span>, <span class="st">"300"</span>, <span class="st">"300i"</span><span class="op">)</span>,</span>

  392. <span>  code_font_google   <span class="op">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span><span class="op">(</span><span class="st">"IBM Plex Mono"</span><span class="op">)</span></span>

  393. <span><span class="op">)</span></span></code></pre></div>

  394. <p>If you set an <code>&lt;type&gt;_font_google</code> theme arguments,

  395. then <code>&lt;type&gt;_font_family</code>,

  396. <code>&lt;type&gt;_font_weight</code> and

  397. <code>&lt;type&gt;_font_url</code> are overwritten – where

  398. <code>&lt;type&gt;</code> is one of <code>header</code>,

  399. <code>text</code>, or <code>code</code>.</p>

  400. <p>To use a font hosted outside of Google fonts, you need to provide

  401. both <code>&lt;type&gt;_font_family</code> and

  402. <code>&lt;type&gt;_font_url</code>. For example, suppose you want to use

  403. a code font with ligatures for your code chunks, such as <a href="https://github.com/tonsky/FiraCode" class="external-link">Fira Code</a>, which would be

  404. declared with <code>code_font_family</code>. The <a href="https://github.com/tonsky/FiraCode#browser-support" class="external-link">browser

  405. usage</a> section of the Fira Code README provides a CSS URL to be used

  406. with an <code>@import</code> statement that you can use with the

  407. <code>code_font_url</code> argument.</p>

  408. <div class="sourceCode" id="cb16"><pre class="downlit sourceCode r">

  409. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_solarized_dark.html">style_solarized_dark</a></span><span class="op">(</span></span>

  410. <span>  code_font_family <span class="op">=</span> <span class="st">"Fira Code"</span>,</span>

  411. <span>  code_font_url <span class="op">=</span> <span class="st">"https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/fira_code.css"</span></span>

  412. <span><span class="op">)</span></span></code></pre></div>

  413. <p>Remember that you need to supply either

  414. <code>&lt;type&gt;_google_font</code> using the

  415. <code><a href="../reference/google_font.html">google_font()</a></code> helper <em>or both</em>

  416. <code>&lt;type&gt;_font_family</code> and

  417. <code>&lt;type&gt;_font_url</code>.</p>

  418. </div>

  419. <div class="section level3">

  420. <h3 id="using-additional-fonts">Using Additional Fonts<a class="anchor" aria-label="anchor" href="#using-additional-fonts"></a>

  421. </h3>

  422. <p>If you want to use additional fonts for use in <a href="#adding-custom-css">custom CSS definitions</a>, use the

  423. <code>extra_fonts</code> argument to pass a list of URLs or

  424. <code><a href="../reference/google_font.html">google_font()</a></code>s. Notice that you will need to add custom CSS

  425. (for example, via <code>extra_css</code>) to use the fonts imported in

  426. <code>extra_fonts</code>.</p>

  427. <div class="sourceCode" id="cb17"><pre class="downlit sourceCode r">

  428. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_mono_light.html">style_mono_light</a></span><span class="op">(</span></span>

  429. <span>  extra_fonts <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>

  430. <span>    <span class="fu"><a href="../reference/google_font.html">google_font</a></span><span class="op">(</span><span class="st">"Sofia"</span><span class="op">)</span>,</span>

  431. <span>    <span class="co"># Young Serif by uplaod.fr</span></span>

  432. <span>    <span class="st">"https://cdn.jsdelivr.net/gh/uplaod/YoungSerif/fonts/webfonts/fontface.css"</span>,</span>

  433. <span>  <span class="op">)</span>,</span>

  434. <span>  extra_css <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>

  435. <span>    <span class="st">".title-slide h2"</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span><span class="st">"font-family"</span> <span class="op">=</span> <span class="st">"Sofia"</span><span class="op">)</span>,</span>

  436. <span>    blockquote <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span><span class="st">"font-family"</span> <span class="op">=</span> <span class="st">"youngserifregular"</span><span class="op">)</span></span>

  437. <span>  <span class="op">)</span></span>

  438. <span><span class="op">)</span></span></code></pre></div>

  439. </div>

  440. </div>

  441. <div class="section level2">

  442. <h2 id="colors">Colors<a class="anchor" aria-label="anchor" href="#colors"></a>

  443. </h2>

  444. <p>When designing your xaringan theme, you may have additional colors in

  445. your desired color palette beyond those used in the accent colors of the

  446. mono and duotone styles.</p>

  447. <p>The <code>style*()</code> functions in xaringanthemer include a

  448. <code>colors</code> argument that lets you quickly define additional

  449. colors to use in your slides. This argument takes a vector of named

  450. colors</p>

  451. <div class="sourceCode" id="cb18"><pre class="downlit sourceCode r">

  452. <code class="sourceCode R"><span><span class="va">colors</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html" class="external-link">c</a></span><span class="op">(</span></span>

  453. <span>  red <span class="op">=</span> <span class="st">"#f34213"</span>,</span>

  454. <span>  purple <span class="op">=</span> <span class="st">"#3e2f5b"</span>,</span>

  455. <span>  orange <span class="op">=</span> <span class="st">"#ff8811"</span>,</span>

  456. <span>  green <span class="op">=</span> <span class="st">"#136f63"</span>,</span>

  457. <span>  white <span class="op">=</span> <span class="st">"#FFFFFF"</span></span>

  458. <span><span class="op">)</span></span></code></pre></div>

  459. <p>and creates CSS classes from the color name that set the text color —

  460. e.g. <code>.red</code> — or that set the background color —

  461. e.g. <code>.bg-red</code>. If you use custom CSS in your slides, the

  462. color name is also stored in a CSS variable —

  463. e.g. <code>var(--red)</code>.</p>

  464. <p>So slide text like this</p>

  465. <div class="sourceCode" id="cb19"><pre class="sourceCode markdown"><code class="sourceCode markdown"><span id="cb19-1"><a href="#cb19-1" tabindex="-1"></a>This **.red[simple]** .white.bg-purple<span class="co">[</span><span class="ot">demo</span><span class="co">]</span> </span>

  466. <span id="cb19-2"><a href="#cb19-2" tabindex="-1"></a>_.orange[shows]_ the colors .green<span class="co">[</span><span class="ot">in action</span><span class="co">]</span>.</span></code></pre></div>

  467. <p>will be rendered in HTML as</p>

  468. <blockquote>

  469. This <strong><span style="color: #f34213">simple</span></strong> <span style="color:#FFFFFF;background-color:#3e2f5b;">demo</span>

  470. <em style="color:#ff8811">shows</em> the colors <span style="color:#136f63">in action</span>.

  471. </blockquote>

  472. <p>Note that the color names in <code>colors</code> need to be valid CSS

  473. names, so <code>"purple-light"</code> will work, but

  474. <code>"purple light"</code> will not.</p>

  475. </div>

  476. <div class="section level2">

  477. <h2 id="adding-custom-css">Adding Custom CSS<a class="anchor" aria-label="anchor" href="#adding-custom-css"></a>

  478. </h2>

  479. <p>You can also add custom CSS classes using the <code>extra_css</code>

  480. argument in the theme functions. This argument takes a named list of CSS

  481. definitions each containing a named list of CSS property-value

  482. pairs.</p>

  483. <div class="sourceCode" id="cb20"><pre class="downlit sourceCode r">

  484. <code class="sourceCode R"><span><span class="va">extra_css</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>

  485. <span>  <span class="st">".small"</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span><span class="st">"font-size"</span> <span class="op">=</span> <span class="st">"90%"</span><span class="op">)</span>,</span>

  486. <span>  <span class="st">".full-width"</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>

  487. <span>    display <span class="op">=</span> <span class="st">"flex"</span>,</span>

  488. <span>    width   <span class="op">=</span> <span class="st">"100%"</span>,</span>

  489. <span>    flex    <span class="op">=</span> <span class="st">"1 1 auto"</span></span>

  490. <span>  <span class="op">)</span></span>

  491. <span><span class="op">)</span></span></code></pre></div>

  492. <p>If you would rather keep your additional css definitions in a

  493. separate file, you can call <code><a href="../reference/style_extra_css.html">style_extra_css()</a></code> separately.

  494. Just be sure to include your new CSS file in the list of applied files

  495. in your YAML header.</p>

  496. <div class="sourceCode" id="cb21"><pre class="downlit sourceCode r">

  497. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_extra_css.html">style_extra_css</a></span><span class="op">(</span>css <span class="op">=</span> <span class="va">extra_css</span>, outfile <span class="op">=</span> <span class="st">"custom.css"</span><span class="op">)</span></span></code></pre></div>

  498. <div class="sourceCode" id="cb22"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb22-1"><a href="#cb22-1" tabindex="-1"></a><span class="co">/* Extra CSS */</span></span>

  499. <span id="cb22-2"><a href="#cb22-2" tabindex="-1"></a><span class="fu">.small</span> {</span>

  500. <span id="cb22-3"><a href="#cb22-3" tabindex="-1"></a>  <span class="kw">font-size</span><span class="ch">:</span> <span class="dv">90</span><span class="dt">%</span><span class="op">;</span></span>

  501. <span id="cb22-4"><a href="#cb22-4" tabindex="-1"></a>}</span>

  502. <span id="cb22-5"><a href="#cb22-5" tabindex="-1"></a><span class="fu">.full-width</span> {</span>

  503. <span id="cb22-6"><a href="#cb22-6" tabindex="-1"></a>  <span class="kw">display</span><span class="ch">:</span> <span class="dv">flex</span><span class="op">;</span></span>

  504. <span id="cb22-7"><a href="#cb22-7" tabindex="-1"></a>  <span class="kw">width</span><span class="ch">:</span> <span class="dv">100</span><span class="dt">%</span><span class="op">;</span></span>

  505. <span id="cb22-8"><a href="#cb22-8" tabindex="-1"></a>  <span class="kw">flex</span><span class="ch">:</span> <span class="dv">1</span> <span class="dv">1</span> <span class="bu">auto</span><span class="op">;</span></span>

  506. <span id="cb22-9"><a href="#cb22-9" tabindex="-1"></a>}</span></code></pre></div>

  507. <p>This is most helpful when wanting to define helper classes to work

  508. with the <a href="https://github.com/gnab/remark" class="external-link">remark.js</a>

  509. <code>.class[]</code> syntax. Using the above example, we could add

  510. slide text <code>.small[in smaller font size]</code>.</p>

  511. <hr>

  512. <p><strong>xaringanthemer</strong> was built by <a href="https://www.garrickadenbuie.com" class="external-link">Garrick Aden-Buie</a> (<a href="https://twitter.com/grrrck" class="external-link">@grrrck</a>).</p>

  513. <p>Big thank you to <a href="https://yihui.org" class="external-link">Yihui Xie</a>,

  514. especially for <a href="https://github.com/yihui/xaringan" class="external-link">xaringan</a>.

  515. Also thanks to <a href="http://www.gnab.org/" class="external-link">Ole Petter Bang</a> for <a href="https://github.com/gnab/remark" class="external-link">remark.js</a>.</p>

  516. <p>Feel free to <a href="https://github.com/gadenbuie/xaringanthemer/issues" class="external-link">file an

  517. issue</a> if you find a bug or have a theme suggestion – or better yet,

  518. submit a pull request!</p>

  519. </div>

  520.   </main><aside class="col-md-3"><nav id="toc" aria-label="Table of contents"><h2>On this page</h2>

  521.     </nav></aside>

  522. </div>

  523. 

  524. 

  525. 

  526.     <footer><div class="pkgdown-footer-left">

  527.   <p>Developed by <a href="https://www.garrickadenbuie.com" class="external-link">Garrick Aden-Buie</a>.</p>

  528. </div>

  529. 

  530. <div class="pkgdown-footer-right">

  531.   <p>Site built with <a href="https://pkgdown.r-lib.org/" class="external-link">pkgdown</a> 2.1.0.</p>

  532. </div>

  533. 

  534.     </footer>

  535. </div>

  536. 

  537. 

  538. 

  539.   <script src="../doc-versions.js"></script>

  540. </body>

  541. </html>