Build URL: https://github.com/gadenbuie/xaringanthemer/actions/runs/353300399
Commit: 99af06835c
gh-pages
| </div> | </div> | ||||
| <p>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, <em>Droid Serif</em>, is no longer officially included in Google Fonts.</p> | <p>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, <em>Droid Serif</em>, is no longer officially included in Google Fonts.</p> | ||||
| <p>If you would like to use the fonts from the <a href="https://slides.yihui.name/xaringan/">default xaringan theme</a>, you can use the following arguments in your style function.</p> | <p>If you would like to use the fonts from the <a href="https://slides.yihui.name/xaringan/">default xaringan theme</a>, you can use the following arguments in your style function.</p> | ||||
| <div class="sourceCode" id="cb1"><pre class="downlit"> | |||||
| <span class="fu"><a href="../reference/xaringanthemer_font_default.html">style_xaringan</a></span><span class="op">(</span> | |||||
| <div class="sourceCode" id="cb1"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="fu"><a href="../reference/xaringanthemer_font_default.html">style_xaringan</a></span><span class="op">(</span> | |||||
| text_font_family <span class="op">=</span> <span class="st">"Droid Serif"</span>, | text_font_family <span class="op">=</span> <span class="st">"Droid Serif"</span>, | ||||
| text_font_url <span class="op">=</span> <span class="st">"https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic"</span>, | text_font_url <span class="op">=</span> <span class="st">"https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic"</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> | 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 class="op">)</span></pre></div> | |||||
| <span class="op">)</span></code></pre></div> | |||||
| </div> | </div> | ||||
| <div id="custom-and-google-font-fonts" class="section level3"> | <div id="custom-and-google-font-fonts" class="section level3"> | ||||
| <h3 class="hasAnchor"> | <h3 class="hasAnchor"> | ||||
| <a href="#custom-and-google-font-fonts" class="anchor"></a>Custom and <em>Google Font</em> Fonts</h3> | <a href="#custom-and-google-font-fonts" class="anchor"></a>Custom and <em>Google Font</em> Fonts</h3> | ||||
| <p><strong>xaringanthemer</strong> makes it easy to use <a href="https://fonts.google.com">Google Fonts</a> in your presentations (provided you have an internet connection during the presentation) or to fully specify your font files.</p> | <p><strong>xaringanthemer</strong> makes it easy to use <a href="https://fonts.google.com">Google Fonts</a> in your presentations (provided you have an internet connection during the presentation) or to fully specify your font files.</p> | ||||
| <p>To use <a href="https://fonts.google.com">Google Fonts</a>, set the <code><type>_font_google</code> theme arguments – <code>text_font_google</code>, <code>header_font_google</code>, <code>code_font_google</code> — using the <code><a href="../reference/google_font.html">google_font()</a></code> helper. The help documentation in <code><a href="../reference/google_font.html">?google_font</a></code> provides more info.</p> | <p>To use <a href="https://fonts.google.com">Google Fonts</a>, set the <code><type>_font_google</code> theme arguments – <code>text_font_google</code>, <code>header_font_google</code>, <code>code_font_google</code> — using the <code><a href="../reference/google_font.html">google_font()</a></code> helper. The help documentation in <code><a href="../reference/google_font.html">?google_font</a></code> provides more info.</p> | ||||
| <div class="sourceCode" id="cb2"><pre class="downlit"> | |||||
| <span class="fu"><a href="../reference/style_mono_light.html">style_mono_light</a></span><span class="op">(</span> | |||||
| <div class="sourceCode" id="cb2"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="fu"><a href="../reference/style_mono_light.html">style_mono_light</a></span><span class="op">(</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>, | 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>, | ||||
| 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>, | 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>, | ||||
| 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> | 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 class="op">)</span></pre></div> | |||||
| <span class="op">)</span></code></pre></div> | |||||
| <p>If you set an <code><type>_font_google</code> theme arguments, then <code><type>_font_family</code>, <code><type>_font_weight</code> and <code><type>_font_url</code> are overwritten – where <code><type></code> is one of <code>header</code>, <code>text</code>, or <code>code</code>.</p> | <p>If you set an <code><type>_font_google</code> theme arguments, then <code><type>_font_family</code>, <code><type>_font_weight</code> and <code><type>_font_url</code> are overwritten – where <code><type></code> is one of <code>header</code>, <code>text</code>, or <code>code</code>.</p> | ||||
| <p>To use a font hosted outside of Google fonts, you need to provide both <code><type>_font_family</code> and <code><type>_font_url</code>. For example, suppose you want to use a code font with ligatures for your code chunks, such as <a href="https://github.com/tonsky/FiraCode">Fira Code</a>, which would be declared with <code>code_font_family</code>. The <a href="https://github.com/tonsky/FiraCode#browser-support">browser usage</a> section of the Fira Code README provides a CSS URL to be used with an <code>@import</code> statement that you can use with the <code>code_font_url</code> argument.</p> | <p>To use a font hosted outside of Google fonts, you need to provide both <code><type>_font_family</code> and <code><type>_font_url</code>. For example, suppose you want to use a code font with ligatures for your code chunks, such as <a href="https://github.com/tonsky/FiraCode">Fira Code</a>, which would be declared with <code>code_font_family</code>. The <a href="https://github.com/tonsky/FiraCode#browser-support">browser usage</a> section of the Fira Code README provides a CSS URL to be used with an <code>@import</code> statement that you can use with the <code>code_font_url</code> argument.</p> | ||||
| <div class="sourceCode" id="cb3"><pre class="downlit"> | |||||
| <span class="fu"><a href="../reference/style_solarized_dark.html">style_solarized_dark</a></span><span class="op">(</span> | |||||
| <div class="sourceCode" id="cb3"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="fu"><a href="../reference/style_solarized_dark.html">style_solarized_dark</a></span><span class="op">(</span> | |||||
| code_font_family <span class="op">=</span> <span class="st">"Fira Code"</span>, | code_font_family <span class="op">=</span> <span class="st">"Fira Code"</span>, | ||||
| code_font_url <span class="op">=</span> <span class="st">"https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/fira_code.css"</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 class="op">)</span></pre></div> | |||||
| <span class="op">)</span></code></pre></div> | |||||
| <p>Remember that you need to supply either <code><type>_google_font</code> using the <code><a href="../reference/google_font.html">google_font()</a></code> helper <em>or both</em> <code><type>_font_family</code> and <code><type>_font_url</code>.</p> | <p>Remember that you need to supply either <code><type>_google_font</code> using the <code><a href="../reference/google_font.html">google_font()</a></code> helper <em>or both</em> <code><type>_font_family</code> and <code><type>_font_url</code>.</p> | ||||
| </div> | </div> | ||||
| <div id="using-additional-fonts" class="section level3"> | <div id="using-additional-fonts" class="section level3"> | ||||
| <h3 class="hasAnchor"> | <h3 class="hasAnchor"> | ||||
| <a href="#using-additional-fonts" class="anchor"></a>Using Additional Fonts</h3> | <a href="#using-additional-fonts" class="anchor"></a>Using Additional Fonts</h3> | ||||
| <p>If you want to use additional fonts for use in <a href="xaringanthemer.html#adding-custom-css">custom CSS definitions</a>, use the <code>extra_fonts</code> argument to pass a list of URLs or <code><a href="../reference/google_font.html">google_font()</a></code>s. Notice that you will need to add custom CSS (for example, via <code>extra_css</code>) to use the fonts imported in <code>extra_fonts</code>.</p> | <p>If you want to use additional fonts for use in <a href="xaringanthemer.html#adding-custom-css">custom CSS definitions</a>, use the <code>extra_fonts</code> argument to pass a list of URLs or <code><a href="../reference/google_font.html">google_font()</a></code>s. Notice that you will need to add custom CSS (for example, via <code>extra_css</code>) to use the fonts imported in <code>extra_fonts</code>.</p> | ||||
| <div class="sourceCode" id="cb4"><pre class="downlit"> | |||||
| <span class="fu"><a href="../reference/style_mono_light.html">style_mono_light</a></span><span class="op">(</span> | |||||
| <div class="sourceCode" id="cb4"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="fu"><a href="../reference/style_mono_light.html">style_mono_light</a></span><span class="op">(</span> | |||||
| extra_fonts <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span> | extra_fonts <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</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 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 class="co"># Young Serif by uplaod.fr</span> | <span class="co"># Young Serif by uplaod.fr</span> | ||||
| <span class="st">".title-slide h2"</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">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 class="st">".title-slide h2"</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">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>, | ||||
| blockquote <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">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> | blockquote <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">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 class="op">)</span> | <span class="op">)</span> | ||||
| <span class="op">)</span></pre></div> | |||||
| <span class="op">)</span></code></pre></div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <span id="cb1-12"><a href="#cb1-12"></a><span class="bn">```</span></span></code></pre></div> | <span id="cb1-12"><a href="#cb1-12"></a><span class="bn">```</span></span></code></pre></div> | ||||
| <p>If you use a hidden chunk like this one inside your slides’ R Markdown source file, <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> will know which colors and fonts you’ve picked.</p> | <p>If you use a hidden chunk like this one inside your slides’ R Markdown source file, <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> will know which colors and fonts you’ve picked.</p> | ||||
| <p>Adding <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> to a ggplot, like this demonstration plot using the <code>mpg</code> dataset from ggplot2, changes the colors and fonts of your plot theme.</p> | <p>Adding <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> to a ggplot, like this demonstration plot using the <code>mpg</code> dataset from ggplot2, changes the colors and fonts of your plot theme.</p> | ||||
| <div class="sourceCode" id="cb2"><pre class="downlit"> | |||||
| <span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span><span class="op">(</span><span class="va"><a href="http://ggplot2.tidyverse.org">ggplot2</a></span><span class="op">)</span> | |||||
| <div class="sourceCode" id="cb2"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span><span class="op">(</span><span class="va"><a href="http://ggplot2.tidyverse.org">ggplot2</a></span><span class="op">)</span> | |||||
| <span class="va">g_base</span> <span class="op"><-</span> <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html">ggplot</a></span><span class="op">(</span><span class="va">mpg</span><span class="op">)</span> <span class="op">+</span> | <span class="va">g_base</span> <span class="op"><-</span> <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html">ggplot</a></span><span class="op">(</span><span class="va">mpg</span><span class="op">)</span> <span class="op">+</span> | ||||
| <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html">aes</a></span><span class="op">(</span><span class="va">hwy</span>, <span class="va">cty</span><span class="op">)</span> <span class="op">+</span> | <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html">aes</a></span><span class="op">(</span><span class="va">hwy</span>, <span class="va">cty</span><span class="op">)</span> <span class="op">+</span> | ||||
| <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="st">"Highway MPG"</span>, y <span class="op">=</span> <span class="st">"City MPG"</span>, title <span class="op">=</span> <span class="st">"Fuel Efficiency"</span><span class="op">)</span> | <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="st">"Highway MPG"</span>, y <span class="op">=</span> <span class="st">"City MPG"</span>, title <span class="op">=</span> <span class="st">"Fuel Efficiency"</span><span class="op">)</span> | ||||
| <span class="co"># Basic plot with default theme</span> | <span class="co"># Basic plot with default theme</span> | ||||
| <span class="va">g_base</span></pre></div> | |||||
| <div class="sourceCode" id="cb3"><pre class="downlit"> | |||||
| <span class="co"># Fancy slide-matching themed plot</span> | |||||
| <span class="va">g_base</span> <span class="op">+</span> <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span><span class="op">)</span></pre></div> | |||||
| <span class="va">g_base</span></code></pre></div> | |||||
| <div class="sourceCode" id="cb3"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="co"># Fancy slide-matching themed plot</span> | |||||
| <span class="va">g_base</span> <span class="op">+</span> <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span><span class="op">)</span></code></pre></div> | |||||
| <p><img src="ggplot2-themes_files/figure-html/ggplot2-demo-1-1.png" width="48%"><img src="ggplot2-themes_files/figure-html/ggplot2-demo-2-1.png" width="48%"></p> | <p><img src="ggplot2-themes_files/figure-html/ggplot2-demo-1-1.png" width="48%"><img src="ggplot2-themes_files/figure-html/ggplot2-demo-2-1.png" width="48%"></p> | ||||
| <p>With <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> the fonts and colors match the slide theme. The default colors of points (like other geometries) has been changed as well to match the slide colors.</p> | <p>With <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> the fonts and colors match the slide theme. The default colors of points (like other geometries) has been changed as well to match the slide colors.</p> | ||||
| <p>To restore the previous default colors of ggplot2 geoms, call</p> | <p>To restore the previous default colors of ggplot2 geoms, call</p> | ||||
| <div class="sourceCode" id="cb4"><pre class="downlit"> | |||||
| <span class="fu"><a href="../reference/theme_xaringan_set_defaults.html">theme_xaringan_restore_defaults</a></span><span class="op">(</span><span class="op">)</span></pre></div> | |||||
| <div class="sourceCode" id="cb4"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="fu"><a href="../reference/theme_xaringan_set_defaults.html">theme_xaringan_restore_defaults</a></span><span class="op">(</span><span class="op">)</span></code></pre></div> | |||||
| <p>Add <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> to automatically create a plot that matches the inverse slide style.</p> | <p>Add <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> to automatically create a plot that matches the inverse slide style.</p> | ||||
| <div class="sourceCode" id="cb5"><pre class="downlit"> | |||||
| <span class="co"># theme_xaringan() on the left, theme_xaringan_inverse() on the right</span> | |||||
| <span class="va">g_base</span> <span class="op">+</span> <span class="fu"><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse</a></span><span class="op">(</span><span class="op">)</span></pre></div> | |||||
| <div class="sourceCode" id="cb5"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="co"># theme_xaringan() on the left, theme_xaringan_inverse() on the right</span> | |||||
| <span class="va">g_base</span> <span class="op">+</span> <span class="fu"><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse</a></span><span class="op">(</span><span class="op">)</span></code></pre></div> | |||||
| <p><img src="ggplot2-themes_files/figure-html/ggplot2-demo-2-1.png" width="48%"><img src="ggplot2-themes_files/figure-html/ggplot2-demo-inverse-1.png" width="48%"></p> | <p><img src="ggplot2-themes_files/figure-html/ggplot2-demo-2-1.png" width="48%"><img src="ggplot2-themes_files/figure-html/ggplot2-demo-inverse-1.png" width="48%"></p> | ||||
| </div> | </div> | ||||
| <div id="using-xaringan-themer-css" class="section level2"> | <div id="using-xaringan-themer-css" class="section level2"> | ||||
| <p>Once you’ve set up your custom xaringan theme, you might want to use the theme’s CSS file for new presentations instead of rebuilding your theme with every new slide deck.</p> | <p>Once you’ve set up your custom xaringan theme, you might want to use the theme’s CSS file for new presentations instead of rebuilding your theme with every new slide deck.</p> | ||||
| <p>In these cases, <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> will look for a CSS file written by <strong>xaringanthemer</strong> in your slides’ directory or in a sub-folder under the same directory that it can use to determine the colors and fonts used in your slides.</p> | <p>In these cases, <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> will look for a CSS file written by <strong>xaringanthemer</strong> in your slides’ directory or in a sub-folder under the same directory that it can use to determine the colors and fonts used in your slides.</p> | ||||
| <p>If you happen to have multiple slide themes written by <strong>xaringanthemer</strong> in the same directory, the one named <code>xaringan-themer.css</code> will be used. If xaringanthemer picks the wrong file, you can use the <code>css_file</code> in <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> to specify exactly which CSS file to use.</p> | <p>If you happen to have multiple slide themes written by <strong>xaringanthemer</strong> in the same directory, the one named <code>xaringan-themer.css</code> will be used. If xaringanthemer picks the wrong file, you can use the <code>css_file</code> in <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> to specify exactly which CSS file to use.</p> | ||||
| <div class="sourceCode" id="cb6"><pre class="downlit"> | |||||
| <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span>css_file <span class="op">=</span> <span class="st">"my-slide-style.css"</span><span class="op">)</span></pre></div> | |||||
| <div class="sourceCode" id="cb6"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span>css_file <span class="op">=</span> <span class="st">"my-slide-style.css"</span><span class="op">)</span></code></pre></div> | |||||
| <p>Note that you can use <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> anywhere you want, not just in xaringan slides! (For example, <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> is working great in these vignettes!) This means that you can use your plot theme in reports and websites while maintaining a consistent look and feel or brand.</p> | <p>Note that you can use <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> anywhere you want, not just in xaringan slides! (For example, <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> is working great in these vignettes!) This means that you can use your plot theme in reports and websites while maintaining a consistent look and feel or brand.</p> | ||||
| <p>Finally, you don’t even need a xaringanthemer CSS file. You can specify the key ingredients for the theme as arguments to <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code>, namely text, background, and accent colors as well as text and title fonts.</p> | <p>Finally, you don’t even need a xaringanthemer CSS file. You can specify the key ingredients for the theme as arguments to <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code>, namely text, background, and accent colors as well as text and title fonts.</p> | ||||
| <p>The R chunk below replicated the demonstrated theme, but doesn’t require a slide style to be set or stored in a CSS file.</p> | <p>The R chunk below replicated the demonstrated theme, but doesn’t require a slide style to be set or stored in a CSS file.</p> | ||||
| <div class="sourceCode" id="cb7"><pre class="downlit"> | |||||
| <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span> | |||||
| <div class="sourceCode" id="cb7"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span> | |||||
| text_color <span class="op">=</span> <span class="st">"#3D3E38"</span>, | text_color <span class="op">=</span> <span class="st">"#3D3E38"</span>, | ||||
| background_color <span class="op">=</span> <span class="st">"#FFFFFF"</span>, | background_color <span class="op">=</span> <span class="st">"#FFFFFF"</span>, | ||||
| accent_color <span class="op">=</span> <span class="st">"#DC322F"</span>, | accent_color <span class="op">=</span> <span class="st">"#DC322F"</span>, | ||||
| text_font_use_google <span class="op">=</span> <span class="cn">TRUE</span>, | text_font_use_google <span class="op">=</span> <span class="cn">TRUE</span>, | ||||
| title_font <span class="op">=</span> <span class="st">"Oleo Script"</span>, | title_font <span class="op">=</span> <span class="st">"Oleo Script"</span>, | ||||
| title_font_use_google <span class="op">=</span> <span class="cn">TRUE</span> | title_font_use_google <span class="op">=</span> <span class="cn">TRUE</span> | ||||
| <span class="op">)</span></pre></div> | |||||
| <span class="op">)</span></code></pre></div> | |||||
| </div> | </div> | ||||
| <div id="colors" class="section level2"> | <div id="colors" class="section level2"> | ||||
| <h2 class="hasAnchor"> | <h2 class="hasAnchor"> | ||||
| <a href="#colors" class="anchor"></a>Colors</h2> | <a href="#colors" class="anchor"></a>Colors</h2> | ||||
| <p>As demonstrated above, <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> and <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> modify the default colors and fonts of geometries. This means that <code><a href="https://ggplot2.tidyverse.org/reference/geom_point.html">geom_point()</a></code>, <code><a href="https://ggplot2.tidyverse.org/reference/geom_bar.html">geom_bar()</a></code>, <code><a href="https://ggplot2.tidyverse.org/reference/geom_text.html">geom_text()</a></code> and other geoms used in your plots will reasonably match your slide themes with no extra work.</p> | <p>As demonstrated above, <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> and <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> modify the default colors and fonts of geometries. This means that <code><a href="https://ggplot2.tidyverse.org/reference/geom_point.html">geom_point()</a></code>, <code><a href="https://ggplot2.tidyverse.org/reference/geom_bar.html">geom_bar()</a></code>, <code><a href="https://ggplot2.tidyverse.org/reference/geom_text.html">geom_text()</a></code> and other geoms used in your plots will reasonably match your slide themes with no extra work.</p> | ||||
| <div class="sourceCode" id="cb8"><pre class="downlit"> | |||||
| <span class="va">g_diamonds</span> <span class="op"><-</span> <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html">ggplot</a></span><span class="op">(</span><span class="va">diamonds</span>, <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span><span class="op">)</span><span class="op">)</span> <span class="op">+</span> | |||||
| <div class="sourceCode" id="cb8"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="va">g_diamonds</span> <span class="op"><-</span> <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html">ggplot</a></span><span class="op">(</span><span class="va">diamonds</span>, <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span><span class="op">)</span><span class="op">)</span> <span class="op">+</span> | |||||
| <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_bar.html">geom_bar</a></span><span class="op">(</span><span class="op">)</span> <span class="op">+</span> | <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_bar.html">geom_bar</a></span><span class="op">(</span><span class="op">)</span> <span class="op">+</span> | ||||
| <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="cn">NULL</span>, y <span class="op">=</span> <span class="cn">NULL</span>, title <span class="op">=</span> <span class="st">"Diamond Cut Quality"</span><span class="op">)</span> <span class="op">+</span> | <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="cn">NULL</span>, y <span class="op">=</span> <span class="cn">NULL</span>, title <span class="op">=</span> <span class="st">"Diamond Cut Quality"</span><span class="op">)</span> <span class="op">+</span> | ||||
| <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/lims.html">ylim</a></span><span class="op">(</span><span class="fl">0</span>, <span class="fl">25000</span><span class="op">)</span> | <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/lims.html">ylim</a></span><span class="op">(</span><span class="fl">0</span>, <span class="fl">25000</span><span class="op">)</span> | ||||
| <span class="va">g_diamonds</span> <span class="op">+</span> <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span><span class="op">)</span></pre></div> | |||||
| <span class="va">g_diamonds</span> <span class="op">+</span> <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span><span class="op">)</span></code></pre></div> | |||||
| <p><img src="ggplot2-themes_files/figure-html/demo-geom-defaults-1.png" width="960"></p> | <p><img src="ggplot2-themes_files/figure-html/demo-geom-defaults-1.png" width="960"></p> | ||||
| <p>Whenever <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> or <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> are called, the default values of many of ggplot2 geoms are set by default. You can opt out of this by setting <code>set_ggplot_defaults = FALSE</code> when using either theme. You can also restore the geom aesthetic defaults to their original values before the first time <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> or <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> were used by running</p> | <p>Whenever <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> or <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> are called, the default values of many of ggplot2 geoms are set by default. You can opt out of this by setting <code>set_ggplot_defaults = FALSE</code> when using either theme. You can also restore the geom aesthetic defaults to their original values before the first time <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> or <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> were used by running</p> | ||||
| <div class="sourceCode" id="cb9"><pre class="downlit"> | |||||
| <span class="fu"><a href="../reference/theme_xaringan_set_defaults.html">theme_xaringan_restore_defaults</a></span><span class="op">(</span><span class="op">)</span></pre></div> | |||||
| <div class="sourceCode" id="cb9"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="fu"><a href="../reference/theme_xaringan_set_defaults.html">theme_xaringan_restore_defaults</a></span><span class="op">(</span><span class="op">)</span></code></pre></div> | |||||
| <div id="scale-xaringan" class="section level3"> | <div id="scale-xaringan" class="section level3"> | ||||
| <h3 class="hasAnchor"> | <h3 class="hasAnchor"> | ||||
| <a href="#scale-xaringan" class="anchor"></a>Custom Color and Fill Scales</h3> | <a href="#scale-xaringan" class="anchor"></a>Custom Color and Fill Scales</h3> | ||||
| <p>xaringanthemer includes monotone color and fill scales to match your ggplot2 theme. The scale functions all follow the naming pattern <code>scale_xaringan_<aes>_<data_type>()</code>, where <code><aes></code> is replaced with either <code>color</code> or <code>fill</code> and <code><data_type></code> is one of <code>discrete</code> or <code>continuous</code>.</p> | <p>xaringanthemer includes monotone color and fill scales to match your ggplot2 theme. The scale functions all follow the naming pattern <code>scale_xaringan_<aes>_<data_type>()</code>, where <code><aes></code> is replaced with either <code>color</code> or <code>fill</code> and <code><data_type></code> is one of <code>discrete</code> or <code>continuous</code>.</p> | ||||
| <p>These scales use <code><a href="http://colorspace.R-Forge.R-project.org//reference/hcl_palettes.html">colorspace::sequential_hcl()</a></code> to create a sequential, monotone color scale based on the primary accent color in your slides. Color scales matching the inverse slides are possible by setting the argument <code>inverse = TRUE</code>.</p> | <p>These scales use <code><a href="http://colorspace.R-Forge.R-project.org//reference/hcl_palettes.html">colorspace::sequential_hcl()</a></code> to create a sequential, monotone color scale based on the primary accent color in your slides. Color scales matching the inverse slides are possible by setting the argument <code>inverse = TRUE</code>.</p> | ||||
| <div class="sourceCode" id="cb10"><pre class="downlit"> | |||||
| <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html">ggplot</a></span><span class="op">(</span><span class="va">diamonds</span>, <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span><span class="op">)</span><span class="op">)</span> <span class="op">+</span> | |||||
| <div class="sourceCode" id="cb10"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html">ggplot</a></span><span class="op">(</span><span class="va">diamonds</span>, <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span><span class="op">)</span><span class="op">)</span> <span class="op">+</span> | |||||
| <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_bar.html">geom_bar</a></span><span class="op">(</span><span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html">aes</a></span><span class="op">(</span>fill <span class="op">=</span> <span class="va">..count..</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 class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_bar.html">geom_bar</a></span><span class="op">(</span><span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html">aes</a></span><span class="op">(</span>fill <span class="op">=</span> <span class="va">..count..</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 class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="cn">NULL</span>, y <span class="op">=</span> <span class="st">"Count"</span>, title <span class="op">=</span> <span class="st">"Diamond Cut Quality"</span><span class="op">)</span> <span class="op">+</span> | <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="cn">NULL</span>, y <span class="op">=</span> <span class="st">"Count"</span>, title <span class="op">=</span> <span class="st">"Diamond Cut Quality"</span><span class="op">)</span> <span class="op">+</span> | ||||
| <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span><span class="op">)</span> <span class="op">+</span> | <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span><span class="op">)</span> <span class="op">+</span> | ||||
| <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_count.html">geom_count</a></span><span class="op">(</span><span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html">aes</a></span><span class="op">(</span>color <span class="op">=</span> <span class="va">..n..</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 class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_count.html">geom_count</a></span><span class="op">(</span><span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html">aes</a></span><span class="op">(</span>color <span class="op">=</span> <span class="va">..n..</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 class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="st">"Highway MPG"</span>, y <span class="op">=</span> <span class="st">"City MPG"</span>, title <span class="op">=</span> <span class="st">"Fuel Efficiency"</span><span class="op">)</span> <span class="op">+</span> | <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="st">"Highway MPG"</span>, y <span class="op">=</span> <span class="st">"City MPG"</span>, title <span class="op">=</span> <span class="st">"Fuel Efficiency"</span><span class="op">)</span> <span class="op">+</span> | ||||
| <span class="fu"><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse</a></span><span class="op">(</span><span class="op">)</span> <span class="op">+</span> | <span class="fu"><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse</a></span><span class="op">(</span><span class="op">)</span> <span class="op">+</span> | ||||
| <span class="fu"><a href="../reference/scale_xaringan.html">scale_xaringan_color_continuous</a></span><span class="op">(</span>breaks <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/seq.html">seq</a></span><span class="op">(</span><span class="fl">3</span>, <span class="fl">12</span>, <span class="fl">2</span><span class="op">)</span>, inverse <span class="op">=</span> <span class="cn">TRUE</span>, begin <span class="op">=</span> <span class="fl">1</span>, end <span class="op">=</span> <span class="fl">0</span><span class="op">)</span></pre></div> | |||||
| <span class="fu"><a href="../reference/scale_xaringan.html">scale_xaringan_color_continuous</a></span><span class="op">(</span>breaks <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/seq.html">seq</a></span><span class="op">(</span><span class="fl">3</span>, <span class="fl">12</span>, <span class="fl">2</span><span class="op">)</span>, inverse <span class="op">=</span> <span class="cn">TRUE</span>, begin <span class="op">=</span> <span class="fl">1</span>, end <span class="op">=</span> <span class="fl">0</span><span class="op">)</span></code></pre></div> | |||||
| <p><img src="ggplot2-themes_files/figure-html/scale-xaringan-1.png" width="48%"><img src="ggplot2-themes_files/figure-html/scale-xaringan-2.png" width="48%"></p> | <p><img src="ggplot2-themes_files/figure-html/scale-xaringan-1.png" width="48%"><img src="ggplot2-themes_files/figure-html/scale-xaringan-2.png" width="48%"></p> | ||||
| <p>In general, these color scales aren’t great at representing the underlying data. In both examples above, the color and fill scales duplicate information displayed via other aesthetics (the height of the bar or the size of the point). I recommend using these scales primarily for style, although the scales can be more or less effective depending on your color scheme.</p> | <p>In general, these color scales aren’t great at representing the underlying data. In both examples above, the color and fill scales duplicate information displayed via other aesthetics (the height of the bar or the size of the point). I recommend using these scales primarily for style, although the scales can be more or less effective depending on your color scheme.</p> | ||||
| <p>The scales come with a few more options:</p> | <p>The scales come with a few more options:</p> | ||||
| <li> | <li> | ||||
| <code>header_font_google = google_font("Oleo Script")</code>.</li> | <code>header_font_google = google_font("Oleo Script")</code>.</li> | ||||
| </ul> | </ul> | ||||
| <div class="sourceCode" id="cb11"><pre class="downlit"> | |||||
| <span class="va">g_diamonds_with_text</span> <span class="op"><-</span> | |||||
| <div class="sourceCode" id="cb11"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="va">g_diamonds_with_text</span> <span class="op"><-</span> | |||||
| <span class="va">g_diamonds</span> <span class="op">+</span> | <span class="va">g_diamonds</span> <span class="op">+</span> | ||||
| <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_text.html">geom_text</a></span><span class="op">(</span><span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html">aes</a></span><span class="op">(</span>y <span class="op">=</span> <span class="va">..count..</span>, label <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/format.html">format</a></span><span class="op">(</span><span class="va">..count..</span>, big.mark <span class="op">=</span> <span class="st">","</span><span class="op">)</span><span class="op">)</span>, | <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_text.html">geom_text</a></span><span class="op">(</span><span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html">aes</a></span><span class="op">(</span>y <span class="op">=</span> <span class="va">..count..</span>, label <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/format.html">format</a></span><span class="op">(</span><span class="va">..count..</span>, big.mark <span class="op">=</span> <span class="st">","</span><span class="op">)</span><span class="op">)</span>, | ||||
| vjust <span class="op">=</span> <span class="op">-</span><span class="fl">0.30</span>, size <span class="op">=</span> <span class="fl">8</span>, stat <span class="op">=</span> <span class="st">"count"</span><span class="op">)</span> <span class="op">+</span> | vjust <span class="op">=</span> <span class="op">-</span><span class="fl">0.30</span>, size <span class="op">=</span> <span class="fl">8</span>, stat <span class="op">=</span> <span class="st">"count"</span><span class="op">)</span> <span class="op">+</span> | ||||
| <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="st">"Cut"</span>, y <span class="op">=</span> <span class="st">"Count"</span><span class="op">)</span> | <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="st">"Cut"</span>, y <span class="op">=</span> <span class="st">"Count"</span><span class="op">)</span> | ||||
| <span class="va">g_diamonds_with_text</span> <span class="op">+</span> <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span><span class="op">)</span></pre></div> | |||||
| <span class="va">g_diamonds_with_text</span> <span class="op">+</span> <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span><span class="op">)</span></code></pre></div> | |||||
| <p><img src="ggplot2-themes_files/figure-html/text%20demo-1.png" width="960"></p> | <p><img src="ggplot2-themes_files/figure-html/text%20demo-1.png" width="960"></p> | ||||
| <p><code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> applies the header font to the plot and axis titles and the text font to the axis ticks labels and any text geoms or annotations.</p> | <p><code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> applies the header font to the plot and axis titles and the text font to the axis ticks labels and any text geoms or annotations.</p> | ||||
| </div> | </div> | ||||
| <h3 class="hasAnchor"> | <h3 class="hasAnchor"> | ||||
| <a href="#manually-specify-plot-fonts" class="anchor"></a>Manually specify plot fonts</h3> | <a href="#manually-specify-plot-fonts" class="anchor"></a>Manually specify plot fonts</h3> | ||||
| <p>You can also specify specific fonts for your plot theme. Both <code>text_font</code> and <code>title_font</code> in <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> and <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> accept <code><a href="../reference/google_font.html">google_font()</a></code>s directly.</p> | <p>You can also specify specific fonts for your plot theme. Both <code>text_font</code> and <code>title_font</code> in <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> and <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> accept <code><a href="../reference/google_font.html">google_font()</a></code>s directly.</p> | ||||
| <div class="sourceCode" id="cb12"><pre class="downlit"> | |||||
| <span class="va">g_diamonds_with_text</span> <span class="op">+</span> | |||||
| <div class="sourceCode" id="cb12"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="va">g_diamonds_with_text</span> <span class="op">+</span> | |||||
| <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span> | <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span> | ||||
| text_font <span class="op">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span><span class="op">(</span><span class="st">"Ranga"</span><span class="op">)</span>, | text_font <span class="op">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span><span class="op">(</span><span class="st">"Ranga"</span><span class="op">)</span>, | ||||
| title_font <span class="op">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span><span class="op">(</span><span class="st">"Holtwood One SC"</span><span class="op">)</span> | title_font <span class="op">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span><span class="op">(</span><span class="st">"Holtwood One SC"</span><span class="op">)</span> | ||||
| <span class="op">)</span></pre></div> | |||||
| <span class="op">)</span></code></pre></div> | |||||
| <p><img src="ggplot2-themes_files/figure-html/text-demo-2-1.png" width="960"></p> | <p><img src="ggplot2-themes_files/figure-html/text-demo-2-1.png" width="960"></p> | ||||
| </div> | </div> | ||||
| <div id="using-fonts-not-in-google-fonts" class="section level3"> | <div id="using-fonts-not-in-google-fonts" class="section level3"> | ||||
| <p>but sysfonts won’t know where to find the TTF font files for this font.</p> | <p>but sysfonts won’t know where to find the TTF font files for this font.</p> | ||||
| <p>To register the font with sysfonts, we use <code><a href="https://rdrr.io/pkg/sysfonts/man/font_add.html">sysfonts::font_add()</a></code>, but first we need to download the font file — the <code><a href="https://rdrr.io/pkg/sysfonts/man/font_add.html">sysfonts::font_add()</a></code> function requires the font file to be local.</p> | <p>To register the font with sysfonts, we use <code><a href="https://rdrr.io/pkg/sysfonts/man/font_add.html">sysfonts::font_add()</a></code>, but first we need to download the font file — the <code><a href="https://rdrr.io/pkg/sysfonts/man/font_add.html">sysfonts::font_add()</a></code> function requires the font file to be local.</p> | ||||
| <p>By inspecting the CSS file at the link I used in <code>text_font_url</code>, I found a direct URL for the <code>.ttf</code> files for <em>GlacialIndifferenceRegular</em>. I’ve included the code I used to download the font to a temporary file below, but in case the URL breaks, I’ve included <em>Glacial Indifference</em> in the xaringanthemer package.</p> | <p>By inspecting the CSS file at the link I used in <code>text_font_url</code>, I found a direct URL for the <code>.ttf</code> files for <em>GlacialIndifferenceRegular</em>. I’ve included the code I used to download the font to a temporary file below, but in case the URL breaks, I’ve included <em>Glacial Indifference</em> in the xaringanthemer package.</p> | ||||
| <div class="sourceCode" id="cb14"><pre class="downlit"> | |||||
| <span class="va">font_url</span> <span class="op"><-</span> <span class="fu"><a href="https://rdrr.io/r/base/file.path.html">file.path</a></span><span class="op">(</span> | |||||
| <div class="sourceCode" id="cb14"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="va">font_url</span> <span class="op"><-</span> <span class="fu"><a href="https://rdrr.io/r/base/file.path.html">file.path</a></span><span class="op">(</span> | |||||
| <span class="st">"https://fontlibrary.org/assets/fonts/glacial-indifference"</span>, | <span class="st">"https://fontlibrary.org/assets/fonts/glacial-indifference"</span>, | ||||
| <span class="st">"5f2cf277506e19ec77729122f27b1faf/0820b3c58fed35de298219f314635982"</span>, | <span class="st">"5f2cf277506e19ec77729122f27b1faf/0820b3c58fed35de298219f314635982"</span>, | ||||
| <span class="st">"GlacialIndifferenceRegular.ttf"</span> | <span class="st">"GlacialIndifferenceRegular.ttf"</span> | ||||
| <span class="op">)</span> | <span class="op">)</span> | ||||
| <span class="va">font_temp</span> <span class="op"><-</span> <span class="fu"><a href="https://rdrr.io/r/base/tempfile.html">tempfile</a></span><span class="op">(</span><span class="op">)</span> | <span class="va">font_temp</span> <span class="op"><-</span> <span class="fu"><a href="https://rdrr.io/r/base/tempfile.html">tempfile</a></span><span class="op">(</span><span class="op">)</span> | ||||
| <span class="fu"><a href="https://rdrr.io/r/utils/download.file.html">download.file</a></span><span class="op">(</span><span class="va">font_url</span>, <span class="va">font_temp</span><span class="op">)</span></pre></div> | |||||
| <div class="sourceCode" id="cb15"><pre class="downlit"> | |||||
| <span class="co"># Path to the local custom font file</span> | |||||
| <span class="fu"><a href="https://rdrr.io/r/utils/download.file.html">download.file</a></span><span class="op">(</span><span class="va">font_url</span>, <span class="va">font_temp</span><span class="op">)</span></code></pre></div> | |||||
| <div class="sourceCode" id="cb15"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="co"># Path to the local custom font file</span> | |||||
| <span class="va">font_temp</span> <span class="op"><-</span> <span class="fu"><a href="https://rdrr.io/r/base/system.file.html">system.file</a></span><span class="op">(</span> | <span class="va">font_temp</span> <span class="op"><-</span> <span class="fu"><a href="https://rdrr.io/r/base/system.file.html">system.file</a></span><span class="op">(</span> | ||||
| <span class="st">"fonts/GlacialIndifferenceRegular.ttf"</span>, package <span class="op">=</span> <span class="st">"xaringanthemer"</span> | <span class="st">"fonts/GlacialIndifferenceRegular.ttf"</span>, package <span class="op">=</span> <span class="st">"xaringanthemer"</span> | ||||
| <span class="op">)</span> | <span class="op">)</span> | ||||
| <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span> | <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span> | ||||
| text_font <span class="op">=</span> <span class="st">"GlacialIndifferenceRegular"</span>, | text_font <span class="op">=</span> <span class="st">"GlacialIndifferenceRegular"</span>, | ||||
| title_font <span class="op">=</span> <span class="st">"GlacialIndifferenceRegular"</span> | title_font <span class="op">=</span> <span class="st">"GlacialIndifferenceRegular"</span> | ||||
| <span class="op">)</span></pre></div> | |||||
| <span class="op">)</span></code></pre></div> | |||||
| <p><img src="ggplot2-themes_files/figure-html/sysfonts-custom-font-1.png" width="960"></p> | <p><img src="ggplot2-themes_files/figure-html/sysfonts-custom-font-1.png" width="960"></p> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <a href="#in-rstudio" class="anchor"></a>In RStudio</h3> | <a href="#in-rstudio" class="anchor"></a>In RStudio</h3> | ||||
| <p>showtext and RStudio’s graphic device don’t always work well together. Depending on your version of RStudio, if you try to preview plots that use <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code>, the fonts in the preview will still be the default sans font or you may not see a plot at all.</p> | <p>showtext and RStudio’s graphic device don’t always work well together. Depending on your version of RStudio, if you try to preview plots that use <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code>, the fonts in the preview will still be the default sans font or you may not see a plot at all.</p> | ||||
| <p>To work around this, open a new <code><a href="https://rdrr.io/r/grDevices/quartz.html">quartz()</a></code> (MacOS) or <code><a href="https://rdrr.io/r/grDevices/x11.html">x11()</a></code> (Windows/Unix) plot device. The plots will then render in a separate window. I usually create a <code><a href="https://rdrr.io/r/grDevices/quartz.html">quartz()</a></code> device with a similar size ratio to my slides.</p> | <p>To work around this, open a new <code><a href="https://rdrr.io/r/grDevices/quartz.html">quartz()</a></code> (MacOS) or <code><a href="https://rdrr.io/r/grDevices/x11.html">x11()</a></code> (Windows/Unix) plot device. The plots will then render in a separate window. I usually create a <code><a href="https://rdrr.io/r/grDevices/quartz.html">quartz()</a></code> device with a similar size ratio to my slides.</p> | ||||
| <div class="sourceCode" id="cb18"><pre class="downlit"> | |||||
| <span class="co">## On Windows</span> | |||||
| <div class="sourceCode" id="cb18"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="co">## On Windows</span> | |||||
| <span class="co"># x11(width = 16 * 2/3, height = 9 * 2/3)</span> | <span class="co"># x11(width = 16 * 2/3, height = 9 * 2/3)</span> | ||||
| <span class="co">## On MacOS</span> | <span class="co">## On MacOS</span> | ||||
| <span class="fu"><a href="https://rdrr.io/r/grDevices/quartz.html">quartz</a></span><span class="op">(</span>width <span class="op">=</span> <span class="fl">16</span> <span class="op">*</span> <span class="fl">2</span><span class="op">/</span><span class="fl">3</span>, height <span class="op">=</span> <span class="fl">9</span> <span class="op">*</span> <span class="fl">2</span><span class="op">/</span><span class="fl">3</span><span class="op">)</span> | <span class="fu"><a href="https://rdrr.io/r/grDevices/quartz.html">quartz</a></span><span class="op">(</span>width <span class="op">=</span> <span class="fl">16</span> <span class="op">*</span> <span class="fl">2</span><span class="op">/</span><span class="fl">3</span>, height <span class="op">=</span> <span class="fl">9</span> <span class="op">*</span> <span class="fl">2</span><span class="op">/</span><span class="fl">3</span><span class="op">)</span> | ||||
| <span class="co">## run plot code to preview in separate window</span> | <span class="co">## run plot code to preview in separate window</span> | ||||
| <span class="fu"><a href="https://rdrr.io/r/grDevices/dev.html">dev.off</a></span><span class="op">(</span><span class="op">)</span> <span class="co"># call when done to close the device</span></pre></div> | |||||
| <span class="fu"><a href="https://rdrr.io/r/grDevices/dev.html">dev.off</a></span><span class="op">(</span><span class="op">)</span> <span class="co"># call when done to close the device</span></code></pre></div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> |
| <a href="#style_mono_light" class="anchor"></a><code>style_mono_light()</code> | <a href="#style_mono_light" class="anchor"></a><code>style_mono_light()</code> | ||||
| </h4> | </h4> | ||||
| <p>A light theme based around a single color.</p> | <p>A light theme based around a single color.</p> | ||||
| <div class="sourceCode" id="cb1"><pre class="downlit"> | |||||
| <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></pre></div> | |||||
| <div class="sourceCode" id="cb1"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><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></code></pre></div> | |||||
| <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_light.png" data-external="1"></p> | <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_light.png" data-external="1"></p> | ||||
| </div> | </div> | ||||
| <div id="style_mono_dark" class="section level4"> | <div id="style_mono_dark" class="section level4"> | ||||
| <a href="#style_mono_dark" class="anchor"></a><code>style_mono_dark()</code> | <a href="#style_mono_dark" class="anchor"></a><code>style_mono_dark()</code> | ||||
| </h4> | </h4> | ||||
| <p>A dark theme based around a single color.</p> | <p>A dark theme based around a single color.</p> | ||||
| <div class="sourceCode" id="cb2"><pre class="downlit"> | |||||
| <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></pre></div> | |||||
| <div class="sourceCode" id="cb2"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><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></code></pre></div> | |||||
| <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_dark.png" data-external="1"></p> | <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_dark.png" data-external="1"></p> | ||||
| </div> | </div> | ||||
| <div id="style_mono_accent" class="section level4"> | <div id="style_mono_accent" class="section level4"> | ||||
| <a href="#style_mono_accent" class="anchor"></a><code>style_mono_accent()</code> | <a href="#style_mono_accent" class="anchor"></a><code>style_mono_accent()</code> | ||||
| </h4> | </h4> | ||||
| <p>The default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.).</p> | <p>The default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.).</p> | ||||
| <div class="sourceCode" id="cb3"><pre class="downlit"> | |||||
| <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></pre></div> | |||||
| <div class="sourceCode" id="cb3"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><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></code></pre></div> | |||||
| <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_accent.png" data-external="1"></p> | <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_accent.png" data-external="1"></p> | ||||
| </div> | </div> | ||||
| <div id="style_mono_accent_inverse" class="section level4"> | <div id="style_mono_accent_inverse" class="section level4"> | ||||
| <a href="#style_mono_accent_inverse" class="anchor"></a><code>style_mono_accent_inverse()</code> | <a href="#style_mono_accent_inverse" class="anchor"></a><code>style_mono_accent_inverse()</code> | ||||
| </h4> | </h4> | ||||
| <p>An “inverted” default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.).</p> | <p>An “inverted” default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.).</p> | ||||
| <div class="sourceCode" id="cb4"><pre class="downlit"> | |||||
| <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></pre></div> | |||||
| <div class="sourceCode" id="cb4"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><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></code></pre></div> | |||||
| <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_accent_inverse.png" data-external="1"></p> | <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_accent_inverse.png" data-external="1"></p> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <a href="#style_duo" class="anchor"></a><code>style_duo()</code> | <a href="#style_duo" class="anchor"></a><code>style_duo()</code> | ||||
| </h4> | </h4> | ||||
| <p>A two-colored theme based on a primary and secondary color.</p> | <p>A two-colored theme based on a primary and secondary color.</p> | ||||
| <div class="sourceCode" id="cb5"><pre class="downlit"> | |||||
| <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></pre></div> | |||||
| <div class="sourceCode" id="cb5"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><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></code></pre></div> | |||||
| <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo.png" data-external="1"></p> | <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo.png" data-external="1"></p> | ||||
| </div> | </div> | ||||
| <div id="style_duo_accent" class="section level4"> | <div id="style_duo_accent" class="section level4"> | ||||
| <a href="#style_duo_accent" class="anchor"></a><code>style_duo_accent()</code> | <a href="#style_duo_accent" class="anchor"></a><code>style_duo_accent()</code> | ||||
| </h4> | </h4> | ||||
| <p>The default Xaringan theme with two accent colors.</p> | <p>The default Xaringan theme with two accent colors.</p> | ||||
| <div class="sourceCode" id="cb6"><pre class="downlit"> | |||||
| <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></pre></div> | |||||
| <div class="sourceCode" id="cb6"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><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></code></pre></div> | |||||
| <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo_accent.png" data-external="1"></p> | <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo_accent.png" data-external="1"></p> | ||||
| </div> | </div> | ||||
| <div id="style_duo_accent_inverse" class="section level4"> | <div id="style_duo_accent_inverse" class="section level4"> | ||||
| <a href="#style_duo_accent_inverse" class="anchor"></a><code>style_duo_accent_inverse()</code> | <a href="#style_duo_accent_inverse" class="anchor"></a><code>style_duo_accent_inverse()</code> | ||||
| </h4> | </h4> | ||||
| <p>An “inverted” default Xaringan theme with two accent colors.</p> | <p>An “inverted” default Xaringan theme with two accent colors.</p> | ||||
| <div class="sourceCode" id="cb7"><pre class="downlit"> | |||||
| <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></pre></div> | |||||
| <div class="sourceCode" id="cb7"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><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></code></pre></div> | |||||
| <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo_accent_inverse.png" data-external="1"></p> | <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo_accent_inverse.png" data-external="1"></p> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <h4 class="hasAnchor"> | <h4 class="hasAnchor"> | ||||
| <a href="#style_solarized_light" class="anchor"></a><code>style_solarized_light()</code> | <a href="#style_solarized_light" class="anchor"></a><code>style_solarized_light()</code> | ||||
| </h4> | </h4> | ||||
| <div class="sourceCode" id="cb8"><pre class="downlit"> | |||||
| <span class="fu"><a href="../reference/style_solarized_light.html">style_solarized_light</a></span><span class="op">(</span><span class="op">)</span></pre></div> | |||||
| <div class="sourceCode" id="cb8"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="fu"><a href="../reference/style_solarized_light.html">style_solarized_light</a></span><span class="op">(</span><span class="op">)</span></code></pre></div> | |||||
| <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_solarized_light.png" data-external="1"></p> | <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_solarized_light.png" data-external="1"></p> | ||||
| </div> | </div> | ||||
| <div id="style_solarized_dark" class="section level4"> | <div id="style_solarized_dark" class="section level4"> | ||||
| <h4 class="hasAnchor"> | <h4 class="hasAnchor"> | ||||
| <a href="#style_solarized_dark" class="anchor"></a><code>style_solarized_dark()</code> | <a href="#style_solarized_dark" class="anchor"></a><code>style_solarized_dark()</code> | ||||
| </h4> | </h4> | ||||
| <div class="sourceCode" id="cb9"><pre class="downlit"> | |||||
| <span class="fu"><a href="../reference/style_solarized_dark.html">style_solarized_dark</a></span><span class="op">(</span><span class="op">)</span></pre></div> | |||||
| <div class="sourceCode" id="cb9"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="fu"><a href="../reference/style_solarized_dark.html">style_solarized_dark</a></span><span class="op">(</span><span class="op">)</span></code></pre></div> | |||||
| <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_solarized_dark.png" data-external="1"></p> | <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_solarized_dark.png" data-external="1"></p> | ||||
| <p>To do this, your YAML header should look more-or-less like this:</p> | <p>To do this, your YAML header should look more-or-less like this:</p> | ||||
| <div class="sourceCode" id="cb10"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb10-1"><a href="#cb10-1"></a><span class="fu">output</span><span class="kw">:</span></span> | <div class="sourceCode" id="cb10"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb10-1"><a href="#cb10-1"></a><span class="fu">output</span><span class="kw">:</span></span> | ||||
| <a href="#colors" class="anchor"></a>Colors</h2> | <a href="#colors" class="anchor"></a>Colors</h2> | ||||
| <p>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.</p> | <p>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.</p> | ||||
| <p>The <code>style*()</code> functions in xaringanthemer include a <code>colors</code> argument that lets you quickly define additional colors to use in your slides. This argument takes a vector of named colors</p> | <p>The <code>style*()</code> functions in xaringanthemer include a <code>colors</code> argument that lets you quickly define additional colors to use in your slides. This argument takes a vector of named colors</p> | ||||
| <div class="sourceCode" id="cb11"><pre class="downlit"> | |||||
| <span class="va">colors</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span><span class="op">(</span> | |||||
| <div class="sourceCode" id="cb11"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="va">colors</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span><span class="op">(</span> | |||||
| red <span class="op">=</span> <span class="st">"#f34213"</span>, | red <span class="op">=</span> <span class="st">"#f34213"</span>, | ||||
| purple <span class="op">=</span> <span class="st">"#3e2f5b"</span>, | purple <span class="op">=</span> <span class="st">"#3e2f5b"</span>, | ||||
| orange <span class="op">=</span> <span class="st">"#ff8811"</span>, | orange <span class="op">=</span> <span class="st">"#ff8811"</span>, | ||||
| green <span class="op">=</span> <span class="st">"#136f63"</span>, | green <span class="op">=</span> <span class="st">"#136f63"</span>, | ||||
| white <span class="op">=</span> <span class="st">"#FFFFFF"</span>, | white <span class="op">=</span> <span class="st">"#FFFFFF"</span>, | ||||
| <span class="op">)</span></pre></div> | |||||
| <span class="op">)</span></code></pre></div> | |||||
| <p>and creates CSS classes from the color name that set the text color — e.g. <code>.red</code> — or that set the background color — e.g. <code>.bg-red</code>. If you use custom CSS in your slides, the color name is also stored in a CSS variable — e.g. <code><a href="https://rdrr.io/r/stats/cor.html">var(--red)</a></code>.</p> | <p>and creates CSS classes from the color name that set the text color — e.g. <code>.red</code> — or that set the background color — e.g. <code>.bg-red</code>. If you use custom CSS in your slides, the color name is also stored in a CSS variable — e.g. <code><a href="https://rdrr.io/r/stats/cor.html">var(--red)</a></code>.</p> | ||||
| <p>So slide text like this</p> | <p>So slide text like this</p> | ||||
| <div class="sourceCode" id="cb12"><pre class="sourceCode markdown"><code class="sourceCode markdown"><span id="cb12-1"><a href="#cb12-1"></a>This **.red[simple]** .white.bg-purple[demo] </span> | <div class="sourceCode" id="cb12"><pre class="sourceCode markdown"><code class="sourceCode markdown"><span id="cb12-1"><a href="#cb12-1"></a>This **.red[simple]** .white.bg-purple[demo] </span> |
| <p><strong>xaringanthemer</strong> even provides a [ggplot2] theme with <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> that uses the colors and fonts from your slide theme. Built on the <a href="https://github.com/yixuan/showtext">showtext</a> package, and designed to work seamlessly with <a href="https://fonts.google.com">Google Fonts</a>.</p> | <p><strong>xaringanthemer</strong> even provides a [ggplot2] theme with <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> that uses the colors and fonts from your slide theme. Built on the <a href="https://github.com/yixuan/showtext">showtext</a> package, and designed to work seamlessly with <a href="https://fonts.google.com">Google Fonts</a>.</p> | ||||
| <p>Color and fill scales are also provided for matching sequential color scales based on the primary color used in your slides. See <code><a href="../reference/scale_xaringan.html">?scale_xaringan</a></code> for more details.</p> | <p>Color and fill scales are also provided for matching sequential color scales based on the primary color used in your slides. See <code><a href="../reference/scale_xaringan.html">?scale_xaringan</a></code> for more details.</p> | ||||
| <p>More details and examples can be found in <code><a href="../articles/ggplot2-themes.html">vignette("ggplot2-themes")</a></code>.</p> | <p>More details and examples can be found in <code><a href="../articles/ggplot2-themes.html">vignette("ggplot2-themes")</a></code>.</p> | ||||
| <div class="sourceCode" id="cb3"><pre class="downlit"> | |||||
| <span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span><span class="op">(</span><span class="va"><a href="http://ggplot2.tidyverse.org">ggplot2</a></span><span class="op">)</span> | |||||
| <div class="sourceCode" id="cb3"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span><span class="op">(</span><span class="va"><a href="http://ggplot2.tidyverse.org">ggplot2</a></span><span class="op">)</span> | |||||
| <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html">ggplot</a></span><span class="op">(</span><span class="va">diamonds</span><span class="op">)</span> <span class="op">+</span> | <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html">ggplot</a></span><span class="op">(</span><span class="va">diamonds</span><span class="op">)</span> <span class="op">+</span> | ||||
| <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html">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 class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html">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 class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_bar.html">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 class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_bar.html">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> | ||||
| title <span class="op">=</span> <span class="st">"A Fancy diamonds Plot"</span> | title <span class="op">=</span> <span class="st">"A Fancy diamonds Plot"</span> | ||||
| <span class="op">)</span> <span class="op">+</span> | <span class="op">)</span> <span class="op">+</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 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 class="fu"><a href="../reference/scale_xaringan.html">scale_xaringan_fill_discrete</a></span><span class="op">(</span><span class="op">)</span></pre></div> | |||||
| <span class="fu"><a href="../reference/scale_xaringan.html">scale_xaringan_fill_discrete</a></span><span class="op">(</span><span class="op">)</span></code></pre></div> | |||||
| <p><img src="../reference/figures/index-theme_xaringan_demo-1.png"></p> | <p><img src="../reference/figures/index-theme_xaringan_demo-1.png"></p> | ||||
| </div> | </div> | ||||
| <div id="tab-completion" class="section level3"> | <div id="tab-completion" class="section level3"> | ||||
| <a href="#style_mono_light" class="anchor"></a><code>style_mono_light()</code> | <a href="#style_mono_light" class="anchor"></a><code>style_mono_light()</code> | ||||
| </h4> | </h4> | ||||
| <p>A light theme based around a single color.</p> | <p>A light theme based around a single color.</p> | ||||
| <div class="sourceCode" id="cb4"><pre class="downlit"> | |||||
| <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></pre></div> | |||||
| <div class="sourceCode" id="cb4"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><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></code></pre></div> | |||||
| <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_light.png" data-external="1"></p> | <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_light.png" data-external="1"></p> | ||||
| </div> | </div> | ||||
| <div id="style_mono_dark" class="section level4"> | <div id="style_mono_dark" class="section level4"> | ||||
| <a href="#style_mono_dark" class="anchor"></a><code>style_mono_dark()</code> | <a href="#style_mono_dark" class="anchor"></a><code>style_mono_dark()</code> | ||||
| </h4> | </h4> | ||||
| <p>A dark theme based around a single color.</p> | <p>A dark theme based around a single color.</p> | ||||
| <div class="sourceCode" id="cb5"><pre class="downlit"> | |||||
| <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></pre></div> | |||||
| <div class="sourceCode" id="cb5"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><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></code></pre></div> | |||||
| <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_dark.png" data-external="1"></p> | <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_dark.png" data-external="1"></p> | ||||
| </div> | </div> | ||||
| <div id="style_mono_accent" class="section level4"> | <div id="style_mono_accent" class="section level4"> | ||||
| <a href="#style_mono_accent" class="anchor"></a><code>style_mono_accent()</code> | <a href="#style_mono_accent" class="anchor"></a><code>style_mono_accent()</code> | ||||
| </h4> | </h4> | ||||
| <p>The default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.).</p> | <p>The default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.).</p> | ||||
| <div class="sourceCode" id="cb6"><pre class="downlit"> | |||||
| <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></pre></div> | |||||
| <div class="sourceCode" id="cb6"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><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></code></pre></div> | |||||
| <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_accent.png" data-external="1"></p> | <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_accent.png" data-external="1"></p> | ||||
| </div> | </div> | ||||
| <div id="style_mono_accent_inverse" class="section level4"> | <div id="style_mono_accent_inverse" class="section level4"> | ||||
| <a href="#style_mono_accent_inverse" class="anchor"></a><code>style_mono_accent_inverse()</code> | <a href="#style_mono_accent_inverse" class="anchor"></a><code>style_mono_accent_inverse()</code> | ||||
| </h4> | </h4> | ||||
| <p>An “inverted” default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.).</p> | <p>An “inverted” default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.).</p> | ||||
| <div class="sourceCode" id="cb7"><pre class="downlit"> | |||||
| <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></pre></div> | |||||
| <div class="sourceCode" id="cb7"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><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></code></pre></div> | |||||
| <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_accent_inverse.png" data-external="1"></p> | <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_accent_inverse.png" data-external="1"></p> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <a href="#style_duo" class="anchor"></a><code>style_duo()</code> | <a href="#style_duo" class="anchor"></a><code>style_duo()</code> | ||||
| </h4> | </h4> | ||||
| <p>A two-colored theme based on a primary and secondary color.</p> | <p>A two-colored theme based on a primary and secondary color.</p> | ||||
| <div class="sourceCode" id="cb8"><pre class="downlit"> | |||||
| <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></pre></div> | |||||
| <div class="sourceCode" id="cb8"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><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></code></pre></div> | |||||
| <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo.png" data-external="1"></p> | <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo.png" data-external="1"></p> | ||||
| </div> | </div> | ||||
| <div id="style_duo_accent" class="section level4"> | <div id="style_duo_accent" class="section level4"> | ||||
| <a href="#style_duo_accent" class="anchor"></a><code>style_duo_accent()</code> | <a href="#style_duo_accent" class="anchor"></a><code>style_duo_accent()</code> | ||||
| </h4> | </h4> | ||||
| <p>The default Xaringan theme with two accent colors.</p> | <p>The default Xaringan theme with two accent colors.</p> | ||||
| <div class="sourceCode" id="cb9"><pre class="downlit"> | |||||
| <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></pre></div> | |||||
| <div class="sourceCode" id="cb9"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><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></code></pre></div> | |||||
| <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo_accent.png" data-external="1"></p> | <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo_accent.png" data-external="1"></p> | ||||
| </div> | </div> | ||||
| <div id="style_duo_accent_inverse" class="section level4"> | <div id="style_duo_accent_inverse" class="section level4"> | ||||
| <a href="#style_duo_accent_inverse" class="anchor"></a><code>style_duo_accent_inverse()</code> | <a href="#style_duo_accent_inverse" class="anchor"></a><code>style_duo_accent_inverse()</code> | ||||
| </h4> | </h4> | ||||
| <p>An “inverted” default Xaringan theme with two accent colors.</p> | <p>An “inverted” default Xaringan theme with two accent colors.</p> | ||||
| <div class="sourceCode" id="cb10"><pre class="downlit"> | |||||
| <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></pre></div> | |||||
| <div class="sourceCode" id="cb10"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><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></code></pre></div> | |||||
| <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo_accent_inverse.png" data-external="1"></p> | <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo_accent_inverse.png" data-external="1"></p> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <h4 class="hasAnchor"> | <h4 class="hasAnchor"> | ||||
| <a href="#style_solarized_light" class="anchor"></a><code>style_solarized_light()</code> | <a href="#style_solarized_light" class="anchor"></a><code>style_solarized_light()</code> | ||||
| </h4> | </h4> | ||||
| <div class="sourceCode" id="cb11"><pre class="downlit"> | |||||
| <span class="fu"><a href="../reference/style_solarized_light.html">style_solarized_light</a></span><span class="op">(</span><span class="op">)</span></pre></div> | |||||
| <div class="sourceCode" id="cb11"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="fu"><a href="../reference/style_solarized_light.html">style_solarized_light</a></span><span class="op">(</span><span class="op">)</span></code></pre></div> | |||||
| <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_solarized_light.png" data-external="1"></p> | <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_solarized_light.png" data-external="1"></p> | ||||
| </div> | </div> | ||||
| <div id="style_solarized_dark" class="section level4"> | <div id="style_solarized_dark" class="section level4"> | ||||
| <h4 class="hasAnchor"> | <h4 class="hasAnchor"> | ||||
| <a href="#style_solarized_dark" class="anchor"></a><code>style_solarized_dark()</code> | <a href="#style_solarized_dark" class="anchor"></a><code>style_solarized_dark()</code> | ||||
| </h4> | </h4> | ||||
| <div class="sourceCode" id="cb12"><pre class="downlit"> | |||||
| <span class="fu"><a href="../reference/style_solarized_dark.html">style_solarized_dark</a></span><span class="op">(</span><span class="op">)</span></pre></div> | |||||
| <div class="sourceCode" id="cb12"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="fu"><a href="../reference/style_solarized_dark.html">style_solarized_dark</a></span><span class="op">(</span><span class="op">)</span></code></pre></div> | |||||
| <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_solarized_dark.png" data-external="1"></p> | <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_solarized_dark.png" data-external="1"></p> | ||||
| <p>To do this, your YAML header should look more-or-less like this:</p> | <p>To do this, your YAML header should look more-or-less like this:</p> | ||||
| <div class="sourceCode" id="cb13"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb13-1"><a href="#cb13-1"></a><span class="fu">output</span><span class="kw">:</span></span> | <div class="sourceCode" id="cb13"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb13-1"><a href="#cb13-1"></a><span class="fu">output</span><span class="kw">:</span></span> | ||||
| </div> | </div> | ||||
| <p>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, <em>Droid Serif</em>, is no longer officially included in Google Fonts.</p> | <p>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, <em>Droid Serif</em>, is no longer officially included in Google Fonts.</p> | ||||
| <p>If you would like to use the fonts from the <a href="https://slides.yihui.name/xaringan/">default xaringan theme</a>, you can use the following arguments in your style function.</p> | <p>If you would like to use the fonts from the <a href="https://slides.yihui.name/xaringan/">default xaringan theme</a>, you can use the following arguments in your style function.</p> | ||||
| <div class="sourceCode" id="cb14"><pre class="downlit"> | |||||
| <span class="fu"><a href="../reference/xaringanthemer_font_default.html">style_xaringan</a></span><span class="op">(</span> | |||||
| <div class="sourceCode" id="cb14"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="fu"><a href="../reference/xaringanthemer_font_default.html">style_xaringan</a></span><span class="op">(</span> | |||||
| text_font_family <span class="op">=</span> <span class="st">"Droid Serif"</span>, | text_font_family <span class="op">=</span> <span class="st">"Droid Serif"</span>, | ||||
| text_font_url <span class="op">=</span> <span class="st">"https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic"</span>, | text_font_url <span class="op">=</span> <span class="st">"https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic"</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> | 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 class="op">)</span></pre></div> | |||||
| <span class="op">)</span></code></pre></div> | |||||
| </div> | </div> | ||||
| <div id="custom-and-google-font-fonts" class="section level3"> | <div id="custom-and-google-font-fonts" class="section level3"> | ||||
| <h3 class="hasAnchor"> | <h3 class="hasAnchor"> | ||||
| <a href="#custom-and-google-font-fonts" class="anchor"></a>Custom and <em>Google Font</em> Fonts</h3> | <a href="#custom-and-google-font-fonts" class="anchor"></a>Custom and <em>Google Font</em> Fonts</h3> | ||||
| <p><strong>xaringanthemer</strong> makes it easy to use <a href="https://fonts.google.com">Google Fonts</a> in your presentations (provided you have an internet connection during the presentation) or to fully specify your font files.</p> | <p><strong>xaringanthemer</strong> makes it easy to use <a href="https://fonts.google.com">Google Fonts</a> in your presentations (provided you have an internet connection during the presentation) or to fully specify your font files.</p> | ||||
| <p>To use <a href="https://fonts.google.com">Google Fonts</a>, set the <code><type>_font_google</code> theme arguments – <code>text_font_google</code>, <code>header_font_google</code>, <code>code_font_google</code> — using the <code><a href="../reference/google_font.html">google_font()</a></code> helper. The help documentation in <code><a href="../reference/google_font.html">?google_font</a></code> provides more info.</p> | <p>To use <a href="https://fonts.google.com">Google Fonts</a>, set the <code><type>_font_google</code> theme arguments – <code>text_font_google</code>, <code>header_font_google</code>, <code>code_font_google</code> — using the <code><a href="../reference/google_font.html">google_font()</a></code> helper. The help documentation in <code><a href="../reference/google_font.html">?google_font</a></code> provides more info.</p> | ||||
| <div class="sourceCode" id="cb15"><pre class="downlit"> | |||||
| <span class="fu"><a href="../reference/style_mono_light.html">style_mono_light</a></span><span class="op">(</span> | |||||
| <div class="sourceCode" id="cb15"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="fu"><a href="../reference/style_mono_light.html">style_mono_light</a></span><span class="op">(</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>, | 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>, | ||||
| 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>, | 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>, | ||||
| 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> | 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 class="op">)</span></pre></div> | |||||
| <span class="op">)</span></code></pre></div> | |||||
| <p>If you set an <code><type>_font_google</code> theme arguments, then <code><type>_font_family</code>, <code><type>_font_weight</code> and <code><type>_font_url</code> are overwritten – where <code><type></code> is one of <code>header</code>, <code>text</code>, or <code>code</code>.</p> | <p>If you set an <code><type>_font_google</code> theme arguments, then <code><type>_font_family</code>, <code><type>_font_weight</code> and <code><type>_font_url</code> are overwritten – where <code><type></code> is one of <code>header</code>, <code>text</code>, or <code>code</code>.</p> | ||||
| <p>To use a font hosted outside of Google fonts, you need to provide both <code><type>_font_family</code> and <code><type>_font_url</code>. For example, suppose you want to use a code font with ligatures for your code chunks, such as <a href="https://github.com/tonsky/FiraCode">Fira Code</a>, which would be declared with <code>code_font_family</code>. The <a href="https://github.com/tonsky/FiraCode#browser-support">browser usage</a> section of the Fira Code README provides a CSS URL to be used with an <code>@import</code> statement that you can use with the <code>code_font_url</code> argument.</p> | <p>To use a font hosted outside of Google fonts, you need to provide both <code><type>_font_family</code> and <code><type>_font_url</code>. For example, suppose you want to use a code font with ligatures for your code chunks, such as <a href="https://github.com/tonsky/FiraCode">Fira Code</a>, which would be declared with <code>code_font_family</code>. The <a href="https://github.com/tonsky/FiraCode#browser-support">browser usage</a> section of the Fira Code README provides a CSS URL to be used with an <code>@import</code> statement that you can use with the <code>code_font_url</code> argument.</p> | ||||
| <div class="sourceCode" id="cb16"><pre class="downlit"> | |||||
| <span class="fu"><a href="../reference/style_solarized_dark.html">style_solarized_dark</a></span><span class="op">(</span> | |||||
| <div class="sourceCode" id="cb16"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="fu"><a href="../reference/style_solarized_dark.html">style_solarized_dark</a></span><span class="op">(</span> | |||||
| code_font_family <span class="op">=</span> <span class="st">"Fira Code"</span>, | code_font_family <span class="op">=</span> <span class="st">"Fira Code"</span>, | ||||
| code_font_url <span class="op">=</span> <span class="st">"https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/fira_code.css"</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 class="op">)</span></pre></div> | |||||
| <span class="op">)</span></code></pre></div> | |||||
| <p>Remember that you need to supply either <code><type>_google_font</code> using the <code><a href="../reference/google_font.html">google_font()</a></code> helper <em>or both</em> <code><type>_font_family</code> and <code><type>_font_url</code>.</p> | <p>Remember that you need to supply either <code><type>_google_font</code> using the <code><a href="../reference/google_font.html">google_font()</a></code> helper <em>or both</em> <code><type>_font_family</code> and <code><type>_font_url</code>.</p> | ||||
| </div> | </div> | ||||
| <div id="using-additional-fonts" class="section level3"> | <div id="using-additional-fonts" class="section level3"> | ||||
| <h3 class="hasAnchor"> | <h3 class="hasAnchor"> | ||||
| <a href="#using-additional-fonts" class="anchor"></a>Using Additional Fonts</h3> | <a href="#using-additional-fonts" class="anchor"></a>Using Additional Fonts</h3> | ||||
| <p>If you want to use additional fonts for use in <a href="#adding-custom-css">custom CSS definitions</a>, use the <code>extra_fonts</code> argument to pass a list of URLs or <code><a href="../reference/google_font.html">google_font()</a></code>s. Notice that you will need to add custom CSS (for example, via <code>extra_css</code>) to use the fonts imported in <code>extra_fonts</code>.</p> | <p>If you want to use additional fonts for use in <a href="#adding-custom-css">custom CSS definitions</a>, use the <code>extra_fonts</code> argument to pass a list of URLs or <code><a href="../reference/google_font.html">google_font()</a></code>s. Notice that you will need to add custom CSS (for example, via <code>extra_css</code>) to use the fonts imported in <code>extra_fonts</code>.</p> | ||||
| <div class="sourceCode" id="cb17"><pre class="downlit"> | |||||
| <span class="fu"><a href="../reference/style_mono_light.html">style_mono_light</a></span><span class="op">(</span> | |||||
| <div class="sourceCode" id="cb17"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="fu"><a href="../reference/style_mono_light.html">style_mono_light</a></span><span class="op">(</span> | |||||
| extra_fonts <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span> | extra_fonts <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</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 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 class="co"># Young Serif by uplaod.fr</span> | <span class="co"># Young Serif by uplaod.fr</span> | ||||
| <span class="st">".title-slide h2"</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">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 class="st">".title-slide h2"</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">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>, | ||||
| blockquote <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">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> | blockquote <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">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 class="op">)</span> | <span class="op">)</span> | ||||
| <span class="op">)</span></pre></div> | |||||
| <span class="op">)</span></code></pre></div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div id="colors" class="section level2"> | <div id="colors" class="section level2"> | ||||
| <a href="#colors" class="anchor"></a>Colors</h2> | <a href="#colors" class="anchor"></a>Colors</h2> | ||||
| <p>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.</p> | <p>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.</p> | ||||
| <p>The <code>style*()</code> functions in xaringanthemer include a <code>colors</code> argument that lets you quickly define additional colors to use in your slides. This argument takes a vector of named colors</p> | <p>The <code>style*()</code> functions in xaringanthemer include a <code>colors</code> argument that lets you quickly define additional colors to use in your slides. This argument takes a vector of named colors</p> | ||||
| <div class="sourceCode" id="cb18"><pre class="downlit"> | |||||
| <span class="va">colors</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span><span class="op">(</span> | |||||
| <div class="sourceCode" id="cb18"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="va">colors</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span><span class="op">(</span> | |||||
| red <span class="op">=</span> <span class="st">"#f34213"</span>, | red <span class="op">=</span> <span class="st">"#f34213"</span>, | ||||
| purple <span class="op">=</span> <span class="st">"#3e2f5b"</span>, | purple <span class="op">=</span> <span class="st">"#3e2f5b"</span>, | ||||
| orange <span class="op">=</span> <span class="st">"#ff8811"</span>, | orange <span class="op">=</span> <span class="st">"#ff8811"</span>, | ||||
| green <span class="op">=</span> <span class="st">"#136f63"</span>, | green <span class="op">=</span> <span class="st">"#136f63"</span>, | ||||
| white <span class="op">=</span> <span class="st">"#FFFFFF"</span>, | white <span class="op">=</span> <span class="st">"#FFFFFF"</span>, | ||||
| <span class="op">)</span></pre></div> | |||||
| <span class="op">)</span></code></pre></div> | |||||
| <p>and creates CSS classes from the color name that set the text color — e.g. <code>.red</code> — or that set the background color — e.g. <code>.bg-red</code>. If you use custom CSS in your slides, the color name is also stored in a CSS variable — e.g. <code><a href="https://rdrr.io/r/stats/cor.html">var(--red)</a></code>.</p> | <p>and creates CSS classes from the color name that set the text color — e.g. <code>.red</code> — or that set the background color — e.g. <code>.bg-red</code>. If you use custom CSS in your slides, the color name is also stored in a CSS variable — e.g. <code><a href="https://rdrr.io/r/stats/cor.html">var(--red)</a></code>.</p> | ||||
| <p>So slide text like this</p> | <p>So slide text like this</p> | ||||
| <div class="sourceCode" id="cb19"><pre class="sourceCode markdown"><code class="sourceCode markdown"><span id="cb19-1"><a href="#cb19-1"></a>This **.red[simple]** .white.bg-purple[demo] </span> | <div class="sourceCode" id="cb19"><pre class="sourceCode markdown"><code class="sourceCode markdown"><span id="cb19-1"><a href="#cb19-1"></a>This **.red[simple]** .white.bg-purple[demo] </span> | ||||
| <h2 class="hasAnchor"> | <h2 class="hasAnchor"> | ||||
| <a href="#adding-custom-css" class="anchor"></a>Adding Custom CSS</h2> | <a href="#adding-custom-css" class="anchor"></a>Adding Custom CSS</h2> | ||||
| <p>You can also add custom CSS classes using the <code>extra_css</code> argument in the theme functions. This argument takes a named list of CSS definitions each containing a named list of CSS property-value pairs.</p> | <p>You can also add custom CSS classes using the <code>extra_css</code> argument in the theme functions. This argument takes a named list of CSS definitions each containing a named list of CSS property-value pairs.</p> | ||||
| <div class="sourceCode" id="cb20"><pre class="downlit"> | |||||
| <span class="va">extra_css</span> <span class="op"><-</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span> | |||||
| <div class="sourceCode" id="cb20"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="va">extra_css</span> <span class="op"><-</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span> | |||||
| <span class="st">".small"</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">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 class="st">".small"</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">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 class="st">".full-width"</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span> | <span class="st">".full-width"</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span> | ||||
| display <span class="op">=</span> <span class="st">"flex"</span>, | display <span class="op">=</span> <span class="st">"flex"</span>, | ||||
| width <span class="op">=</span> <span class="st">"100%"</span>, | width <span class="op">=</span> <span class="st">"100%"</span>, | ||||
| flex <span class="op">=</span> <span class="st">"1 1 auto"</span> | flex <span class="op">=</span> <span class="st">"1 1 auto"</span> | ||||
| <span class="op">)</span> | <span class="op">)</span> | ||||
| <span class="op">)</span></pre></div> | |||||
| <span class="op">)</span></code></pre></div> | |||||
| <p>If you would rather keep your additional css definitions in a separate file, you can call <code><a href="../reference/style_extra_css.html">style_extra_css()</a></code> separately. Just be sure to include your new CSS file in the list of applied files in your YAML header.</p> | <p>If you would rather keep your additional css definitions in a separate file, you can call <code><a href="../reference/style_extra_css.html">style_extra_css()</a></code> separately. Just be sure to include your new CSS file in the list of applied files in your YAML header.</p> | ||||
| <div class="sourceCode" id="cb21"><pre class="downlit"> | |||||
| <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></pre></div> | |||||
| <div class="sourceCode" id="cb21"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><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></code></pre></div> | |||||
| <div class="sourceCode" id="cb22"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb22-1"><a href="#cb22-1"></a><span class="co">/* Extra CSS */</span></span> | <div class="sourceCode" id="cb22"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb22-1"><a href="#cb22-1"></a><span class="co">/* Extra CSS */</span></span> | ||||
| <span id="cb22-2"><a href="#cb22-2"></a><span class="fu">.small</span> {</span> | <span id="cb22-2"><a href="#cb22-2"></a><span class="fu">.small</span> {</span> | ||||
| <span id="cb22-3"><a href="#cb22-3"></a> <span class="kw">font-size</span>: <span class="dv">90</span><span class="dt">%</span><span class="op">;</span></span> | <span id="cb22-3"><a href="#cb22-3"></a> <span class="kw">font-size</span>: <span class="dv">90</span><span class="dt">%</span><span class="op">;</span></span> |
| <h2 class="hasAnchor"> | <h2 class="hasAnchor"> | ||||
| <a href="#installation" class="anchor"></a>Installation</h2> | <a href="#installation" class="anchor"></a>Installation</h2> | ||||
| <p>You can install <strong>xaringanthemer</strong> from CRAN</p> | <p>You can install <strong>xaringanthemer</strong> from CRAN</p> | ||||
| <div class="sourceCode" id="cb1"><pre class="downlit"> | |||||
| <span class="fu"><a href="https://rdrr.io/r/utils/install.packages.html">install.packages</a></span><span class="op">(</span><span class="st">"xaringanthemer"</span><span class="op">)</span></pre></div> | |||||
| <div class="sourceCode" id="cb1"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="fu"><a href="https://rdrr.io/r/utils/install.packages.html">install.packages</a></span><span class="op">(</span><span class="st">"xaringanthemer"</span><span class="op">)</span></code></pre></div> | |||||
| <p>or you can install the development version of xaringanthemer from <a href="https://github.com/gadenbuie/xaringanthemer">GitHub</a>.</p> | <p>or you can install the development version of xaringanthemer from <a href="https://github.com/gadenbuie/xaringanthemer">GitHub</a>.</p> | ||||
| <div class="sourceCode" id="cb2"><pre class="downlit"> | |||||
| <span class="co"># install.packages("remotes")</span> | |||||
| <span class="fu">remotes</span><span class="fu">::</span><span class="fu"><a href="https://remotes.r-lib.org/reference/install_github.html">install_github</a></span><span class="op">(</span><span class="st">"gadenbuie/xaringanthemer"</span><span class="op">)</span></pre></div> | |||||
| <div class="sourceCode" id="cb2"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="co"># install.packages("remotes")</span> | |||||
| <span class="fu">remotes</span><span class="fu">::</span><span class="fu"><a href="https://remotes.r-lib.org/reference/install_github.html">install_github</a></span><span class="op">(</span><span class="st">"gadenbuie/xaringanthemer"</span><span class="op">)</span></code></pre></div> | |||||
| </div> | </div> | ||||
| <div id="quick-intro" class="section level2"> | <div id="quick-intro" class="section level2"> | ||||
| <h2 class="hasAnchor"> | <h2 class="hasAnchor"> | ||||
| <p><strong>xaringanthemer</strong> even provides a <a href="https://ggplot2.tidyverse.org">ggplot2</a> theme with <code><a href="reference/theme_xaringan.html">theme_xaringan()</a></code> that uses the colors and fonts from your slide theme. Built on the <a href="https://github.com/yixuan/showtext">showtext</a> package, and designed to work seamlessly with <a href="https://fonts.google.com">Google Fonts</a>.</p> | <p><strong>xaringanthemer</strong> even provides a <a href="https://ggplot2.tidyverse.org">ggplot2</a> theme with <code><a href="reference/theme_xaringan.html">theme_xaringan()</a></code> that uses the colors and fonts from your slide theme. Built on the <a href="https://github.com/yixuan/showtext">showtext</a> package, and designed to work seamlessly with <a href="https://fonts.google.com">Google Fonts</a>.</p> | ||||
| <p>Color and fill scales are also provided for matching sequential color scales based on the primary color used in your slides. See <code><a href="reference/scale_xaringan.html">?scale_xaringan</a></code> for more details.</p> | <p>Color and fill scales are also provided for matching sequential color scales based on the primary color used in your slides. See <code><a href="reference/scale_xaringan.html">?scale_xaringan</a></code> for more details.</p> | ||||
| <p>More details and examples can be found in <code><a href="articles/ggplot2-themes.html">vignette("ggplot2-themes")</a></code>.</p> | <p>More details and examples can be found in <code><a href="articles/ggplot2-themes.html">vignette("ggplot2-themes")</a></code>.</p> | ||||
| <div class="sourceCode" id="cb5"><pre class="downlit"> | |||||
| <span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span><span class="op">(</span><span class="va"><a href="http://ggplot2.tidyverse.org">ggplot2</a></span><span class="op">)</span> | |||||
| <div class="sourceCode" id="cb5"><pre class="downlit sourceCode r"> | |||||
| <code class="sourceCode R"><span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span><span class="op">(</span><span class="va"><a href="http://ggplot2.tidyverse.org">ggplot2</a></span><span class="op">)</span> | |||||
| <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html">ggplot</a></span><span class="op">(</span><span class="va">diamonds</span><span class="op">)</span> <span class="op">+</span> | <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html">ggplot</a></span><span class="op">(</span><span class="va">diamonds</span><span class="op">)</span> <span class="op">+</span> | ||||
| <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html">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 class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html">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 class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_bar.html">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 class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_bar.html">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> | ||||
| title <span class="op">=</span> <span class="st">"A Fancy diamonds Plot"</span> | title <span class="op">=</span> <span class="st">"A Fancy diamonds Plot"</span> | ||||
| <span class="op">)</span> <span class="op">+</span> | <span class="op">)</span> <span class="op">+</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 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 class="fu"><a href="reference/scale_xaringan.html">scale_xaringan_fill_discrete</a></span><span class="op">(</span><span class="op">)</span></pre></div> | |||||
| <span class="fu"><a href="reference/scale_xaringan.html">scale_xaringan_fill_discrete</a></span><span class="op">(</span><span class="op">)</span></code></pre></div> | |||||
| <p><img src="reference/figures/index-theme_xaringan_demo-1.png" width="100%"></p> | <p><img src="reference/figures/index-theme_xaringan_demo-1.png" width="100%"></p> | ||||
| </div> | </div> | ||||
| <div id="tab-completion" class="section level3"> | <div id="tab-completion" class="section level3"> |
| template-variables: template-variables.html | template-variables: template-variables.html | ||||
| themes: themes.html | themes: themes.html | ||||
| xaringanthemer: xaringanthemer.html | xaringanthemer: xaringanthemer.html | ||||
| last_built: 2020-11-02T06:13Z | |||||
| last_built: 2020-11-09T06:14Z | |||||
| urls: | urls: | ||||
| reference: https://pkg.garrickadenbuie.com/xaringanthemer//reference | reference: https://pkg.garrickadenbuie.com/xaringanthemer//reference | ||||
| article: https://pkg.garrickadenbuie.com/xaringanthemer//articles | article: https://pkg.garrickadenbuie.com/xaringanthemer//articles |