garrick
/
xaringanthemer
ミラー元 https://github.com/gadenbuie/xaringanthemer.git


			
							<!DOCTYPE html>
<!-- Generated by pkgdown: do not edit by hand --><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Xaringan CSS Themes • xaringanthemer</title>
<!-- jquery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><!-- Bootstrap --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha256-bZLfwXAP04zRMK2BjiO8iu9pf4FbLqX6zitd+tIvLhE=" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-nuL8/2cJ5NDSSwnKD8VqreErSWHtnEP9E7AySL+1ev4=" crossorigin="anonymous"></script><!-- bootstrap-toc --><link rel="stylesheet" href="bootstrap-toc.css">
<script src="bootstrap-toc.js"></script><!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/v4-shims.min.css" integrity="sha256-wZjR52fzng1pJHwx4aV2AO3yyTOXrcDW7jBpJtTwVxw=" crossorigin="anonymous">
<!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=" crossorigin="anonymous"></script><!-- headroom.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/headroom.min.js" integrity="sha256-AsUX4SJE1+yuDu5+mAVzJbuYNPHj/WroHuZ8Ir/CkE0=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script><!-- pkgdown --><link href="pkgdown.css" rel="stylesheet">
<script src="pkgdown.js"></script><link href="extra.css" rel="stylesheet">
<meta property="og:title" content="Custom Xaringan CSS Themes">
<meta property="og:description" content="Give your xaringan slides some style with xaringanthemer.
Easy slide and plot themes for xaringan slides.
">
<meta name="twitter:card" content="summary">
<meta name="twitter:creator" content="@grrrck">
<meta name="twitter:site" content="@grrrck">
<meta name="robots" content="noindex">
<!-- mathjax --><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#toc">
    <div class="container template-home">
      <header><div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">
        <a class="navbar-link" href="index.html">xaringanthemer</a>
        <span class="version label label-danger" data-toggle="tooltip" data-placement="bottom" title="In-development version">0.2.0.9100</span>
      </span>
    </div>

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
<li>
  <a href="articles/xaringanthemer.html">Get started</a>
</li>
<li>
  <a href="reference/index.html">Reference</a>
</li>
<li>
  <a href="articles/themes.html">Themes</a>
</li>
<li>
  <a href="articles/fonts.html">Fonts</a>
</li>
<li>
  <a href="articles/template-variables.html">Template Variables</a>
</li>
      </ul>
<ul class="nav navbar-nav navbar-right">
<li>
  <a href="news/index.html">
    <span class="fa fa fa fa-newspaper-o fa-lg"></span>
     
    
  </a>
</li>
<li>
  <a href="https://github.com/gadenbuie/xaringanthemer">
    <span class="fa fa-github fa-lg"></span>
     
  </a>
</li>
<li>
  <a href="https://twitter.com/grrrck">
    <span class="fa fa-twitter fa-lg"></span>
     
  </a>
</li>
<li>
  <a href="https://www.garrickadenbuie.com">
    <span class="fa fa-home fa-lg"></span>
     
  </a>
</li>
      </ul>
</div>
<!--/.nav-collapse -->
  </div>
<!--/.container -->
</div>
<!--/.navbar -->

      
      </header><div class="row">
  <div class="contents col-md-9">
<div id="xaringanthemer" class="section level1">
<div class="page-header"><h1 class="hasAnchor">
<a href="#xaringanthemer" class="anchor"></a>xaringanthemer</h1></div>
<!-- badges: start -->

<p>Give your <a href="https://github.com/yihui/xaringan">xaringan</a> slides some style with <strong>xaringanthemer</strong> within your <code>slides.Rmd</code> file without (much) CSS.</p>
<p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/examples.gif" alt="Animation previewing many xaringanthemer themes"></p>
<ul>
<li><a href="#installation">Installation</a></li>
<li><a href="#quick-intro">Quick Intro</a></li>
<li>
<a href="#themes">Themes</a>
<ul>
<li><a href="#monotone">Monotone</a></li>
<li><a href="#duotone">Duotone</a></li>
<li><a href="#solarized">Solarized</a></li>
</ul>
</li>
<li><a href="#theme-settings">Theme Settings</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#fonts">Fonts</a></li>
<li><a href="#adding-custom-css">Adding Custom CSS</a></li>
</ul>
<div id="installation" class="section level2">
<h2 class="hasAnchor">
<a href="#installation" class="anchor"></a>Installation</h2>
<p>You can install <strong>xaringanthemer</strong> from CRAN</p>
<div class="sourceCode" id="cb1"><pre class="r"><span class="fu"><a href="https://rdrr.io/r/utils/install.packages.html">install.packages</a></span>(<span class="st">"xaringanthemer"</span>)</pre></div>
<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="r"><span class="co"># install.packages("devtools")</span>
<span class="kw pkg">devtools</span><span class="kw ns">::</span><span class="fu">install_github</span>(<span class="st">"gadenbuie/xaringanthemer"</span>)</pre></div>
</div>
<div id="quick-intro" class="section level2">
<h2 class="hasAnchor">
<a href="#quick-intro" class="anchor"></a>Quick Intro</h2>
<!-- Set link to theme-settings, template-variables, theme functions -->
<p>First, add the <code>xaringan-themer.css</code> file to the YAML header of your xaringan slides.</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode yaml"><code class="sourceCode yaml"><a class="sourceLine" id="cb3-1" data-line-number="1"><span class="fu">output:</span></a>
<a class="sourceLine" id="cb3-2" data-line-number="2">  <span class="fu">xaringan:</span><span class="at">:moon_reader:</span></a>
<a class="sourceLine" id="cb3-3" data-line-number="3">    <span class="fu">css:</span><span class="at"> xaringan-themer.css</span></a></code></pre></div>
<p>Then, in a hidden chunk just after the knitr setup chunk, load <strong>xaringanthemer</strong> and try one of the <a href="#themes">theme functions</a>.</p>
<div class="sourceCode" id="cb4"><pre class="sourceCode markdown"><code class="sourceCode markdown"><a class="sourceLine" id="cb4-1" data-line-number="1">```{r xaringan-themer, include = FALSE}</a>
<a class="sourceLine" id="cb4-2" data-line-number="2">library(xaringanthemer)</a>
<a class="sourceLine" id="cb4-3" data-line-number="3">style_mono_light(</a>
<a class="sourceLine" id="cb4-4" data-line-number="4">  base_color = "#1c5253",</a>
<a class="sourceLine" id="cb4-5" data-line-number="5">  header_font_google = google_font("Josefin Sans"),</a>
<a class="sourceLine" id="cb4-6" data-line-number="6">  text_font_google   = google_font("Montserrat", "300", "300i"),</a>
<a class="sourceLine" id="cb4-7" data-line-number="7">  code_font_google   = google_font("Droid Mono")</a>
<a class="sourceLine" id="cb4-8" data-line-number="8">)</a>
<a class="sourceLine" id="cb4-9" data-line-number="9">```</a></code></pre></div>
<p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_light_1c5253.png" alt="Example title and normal slides using a green xaringanthemer theme"></p>
<div id="tab-completion" class="section level3">
<h3 class="hasAnchor">
<a href="#tab-completion" class="anchor"></a>Tab Completion</h3>
<p><strong>xaringanthemer</strong> is <kbd>Tab</kbd> friendly – <a href="#theme-settings">use autocomplete to explore</a> the <a href="vignettes/template-variables.html">template variables</a> that you can adjust in each of the themes!</p>
<p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example-rstudio-completion.gif" alt="Demonstration of argument auto-completion with RStudio"></p>
</div>
<div id="r-markdown-template-in-rstudio" class="section level3">
<h3 class="hasAnchor">
<a href="#r-markdown-template-in-rstudio" class="anchor"></a>R Markdown Template in RStudio</h3>
<p>You can also skip the above and just create a <em>Ninja Themed Presentation</em> from the New R Markdown Document menu in RStudio.</p>
<center>
<p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/rmarkdown-template-screenshot.png" alt="The 'New R Markdown Document' menu in RStudio"></p>
</center>
</div>
</div>
<div id="themes" class="section level2">
<h2 class="hasAnchor">
<a href="#themes" class="anchor"></a>Themes</h2>
<p><strong>xaringanthemer</strong> includes a number of functions that provide themed <strong>xaringan</strong> styles. All of the styling functions start with the <code>style_</code> prefix.</p>
<p>The goal of each style function is to quickly set up a coordinated color palette for your slides based on one or two starter colors. Styles based on one color start with <code>style_mono_</code> and styles based on two colors start with <code>style_duo_</code>. How the starter colors are used is described in the final portion of the style function name. For example, <code><a href="reference/style_mono_accent.html">style_mono_accent()</a></code> uses a single color as an accent color.</p>
<p>Note that the colors used below are for demonstration only, the point of the <code>style_</code> functions is for you to choose your own color palette!</p>
<p>If you color palette uses more than two colors, you can add additional colors with the <code>colors</code> argument. See the <a href="#colors">Colors</a> section for more information.</p>
<div id="monotone" class="section level3">
<h3 class="hasAnchor">
<a href="#monotone" class="anchor"></a>Monotone</h3>
<p>Use these functions to automatically create a consistent color palette for your slides, based around a single color.</p>
<div id="style_mono_light" class="section level4">
<h4 class="hasAnchor">
<a href="#style_mono_light" class="anchor"></a><code>style_mono_light()</code>
</h4>
<p>A light theme based around a single color.</p>
<div class="sourceCode" id="cb5"><pre class="r"><span class="fu"><a href="reference/style_mono_light.html">style_mono_light</a></span>(<span class="kw">base_color</span> <span class="kw">=</span> <span class="st">"#23395b"</span>)</pre></div>
<p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_light.png"></p>
</div>
<div id="style_mono_dark" class="section level4">
<h4 class="hasAnchor">
<a href="#style_mono_dark" class="anchor"></a><code>style_mono_dark()</code>
</h4>
<p>A dark theme based around a single color.</p>
<div class="sourceCode" id="cb6"><pre class="r"><span class="fu"><a href="reference/style_mono_dark.html">style_mono_dark</a></span>(<span class="kw">base_color</span> <span class="kw">=</span> <span class="st">"#cbf7ed"</span>)</pre></div>
<p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_dark.png"></p>
</div>
<div id="style_mono_accent" class="section level4">
<h4 class="hasAnchor">
<a href="#style_mono_accent" class="anchor"></a><code>style_mono_accent()</code>
</h4>
<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="cb7"><pre class="r"><span class="fu"><a href="reference/style_mono_accent.html">style_mono_accent</a></span>(<span class="kw">base_color</span> <span class="kw">=</span> <span class="st">"#43418A"</span>)</pre></div>
<p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_accent.png"></p>
</div>
<div id="style_mono_accent_inverse" class="section level4">
<h4 class="hasAnchor">
<a href="#style_mono_accent_inverse" class="anchor"></a><code>style_mono_accent_inverse()</code>
</h4>
<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="cb8"><pre class="r"><span class="fu"><a href="reference/style_mono_accent_inverse.html">style_mono_accent_inverse</a></span>(<span class="kw">base_color</span> <span class="kw">=</span> <span class="st">"#3C989E"</span>)</pre></div>
<p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_accent_inverse.png"></p>
</div>
</div>
<div id="duotone" class="section level3">
<h3 class="hasAnchor">
<a href="#duotone" class="anchor"></a>Duotone</h3>
<p>These themes build from two (ideally) complementary colors.</p>
<div id="style_duo" class="section level4">
<h4 class="hasAnchor">
<a href="#style_duo" class="anchor"></a><code>style_duo()</code>
</h4>
<p>A two-colored theme based on a primary and secondary color.</p>
<div class="sourceCode" id="cb9"><pre class="r"><span class="fu"><a href="reference/style_duo.html">style_duo</a></span>(<span class="kw">primary_color</span> <span class="kw">=</span> <span class="st">"#1F4257"</span>, <span class="kw">secondary_color</span> <span class="kw">=</span> <span class="st">"#F97B64"</span>)</pre></div>
<p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo.png"></p>
</div>
<div id="style_duo_accent" class="section level4">
<h4 class="hasAnchor">
<a href="#style_duo_accent" class="anchor"></a><code>style_duo_accent()</code>
</h4>
<p>The default Xaringan theme with two accent colors.</p>
<div class="sourceCode" id="cb10"><pre class="r"><span class="fu"><a href="reference/style_duo_accent.html">style_duo_accent</a></span>(<span class="kw">primary_color</span> <span class="kw">=</span> <span class="st">"#006747"</span>, <span class="kw">secondary_color</span> <span class="kw">=</span> <span class="st">"#CFC493"</span>)</pre></div>
<p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo_accent.png"></p>
</div>
<div id="style_duo_accent_inverse" class="section level4">
<h4 class="hasAnchor">
<a href="#style_duo_accent_inverse" class="anchor"></a><code>style_duo_accent_inverse()</code>
</h4>
<p>An “inverted” default Xaringan theme with two accent colors.</p>
<div class="sourceCode" id="cb11"><pre class="r"><span class="fu"><a href="reference/style_duo_accent_inverse.html">style_duo_accent_inverse</a></span>(<span class="kw">primary_color</span> <span class="kw">=</span> <span class="st">"#006747"</span>, <span class="kw">secondary_color</span> <span class="kw">=</span> <span class="st">"#CFC493"</span>)</pre></div>
<p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo_accent_inverse.png"></p>
</div>
</div>
<div id="solarized" class="section level3">
<h3 class="hasAnchor">
<a href="#solarized" class="anchor"></a>Solarized</h3>
<p>There are also two themes based around the <a href="http://ethanschoonover.com/solarized">solarized color palette</a>, <code><a href="reference/style_solarized_light.html">style_solarized_light()</a></code> and <code><a href="reference/style_solarized_dark.html">style_solarized_dark()</a></code>. For both themes, it is advisted to change the syntax highlighting theme to <code>solarized-light</code> or <code>solarized-dark</code> (looks great paired or constrasted).</p>
<div id="style_solarized_light" class="section level4">
<h4 class="hasAnchor">
<a href="#style_solarized_light" class="anchor"></a><code>style_solarized_light()</code>
</h4>
<div class="sourceCode" id="cb12"><pre class="r"><span class="fu"><a href="reference/style_solarized_light.html">style_solarized_light</a></span>()</pre></div>
<p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_solarized_light.png"></p>
</div>
<div id="style_solarized_dark" class="section level4">
<h4 class="hasAnchor">
<a href="#style_solarized_dark" class="anchor"></a><code>style_solarized_dark()</code>
</h4>
<div class="sourceCode" id="cb13"><pre class="r"><span class="fu"><a href="reference/style_solarized_dark.html">style_solarized_dark</a></span>()</pre></div>
<p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_solarized_dark.png"></p>
<p>To do this, your YAML header should look more-or-less like this:</p>
<div class="sourceCode" id="cb14"><pre class="sourceCode yaml"><code class="sourceCode yaml"><a class="sourceLine" id="cb14-1" data-line-number="1"><span class="fu">output:</span></a>
<a class="sourceLine" id="cb14-2" data-line-number="2">  <span class="fu">xaringan:</span><span class="at">:moon_reader:</span></a>
<a class="sourceLine" id="cb14-3" data-line-number="3">    <span class="fu">css:</span><span class="at"> </span><span class="kw">[</span><span class="st">"xaringan-themer.css"</span><span class="kw">]</span></a>
<a class="sourceLine" id="cb14-4" data-line-number="4">    <span class="fu">nature:</span></a>
<a class="sourceLine" id="cb14-5" data-line-number="5">      <span class="fu">highlightStyle:</span><span class="at"> solarized-dark</span></a>
<a class="sourceLine" id="cb14-6" data-line-number="6">      <span class="fu">highlightLines:</span><span class="at"> true</span></a>
<a class="sourceLine" id="cb14-7" data-line-number="7">      <span class="fu">countIncrementalSlides:</span><span class="at"> false</span></a></code></pre></div>
</div>
</div>
</div>
<div id="theme-settings" class="section level2">
<h2 class="hasAnchor">
<a href="#theme-settings" class="anchor"></a>Theme Settings</h2>
<p>The theme functions listed above are wrappers around the central function of this package, <code><a href="reference/style_xaringan.html">style_xaringan()</a></code>. If you want to start from the default <strong>xaringan</strong> theme and make a few modifications, start there.</p>
<p>All of the <a href="vignettes/template-variables.html">theme template variables</a> are repeated in each of the theme functions (instead of relying on <code>...</code>) so that you can use autocompletion to find and change the defaults for any theme function. To override the default value of any theme functions, set the appropriate argument in the theme function. A table of all template variables is included in <a href="vignettes/template-variables.html"><code><a href="articles/template-variables.html">vignette("template-variables", "xaringanthemer")</a></code></a>.</p>
<p>As an example, try typing out <code>style_duo_accent(</code> and then press <kbd>Tab</kbd> to see all of the theme options.</p>
<p>The arguments of each theme function are named so that you can first think of the element you want to change, then the property of that element.</p>
<p>Here are some of the <code>text_</code> theme options:</p>
<ul>
<li><code>text_color</code></li>
<li><code>text_bold_color</code></li>
<li><code>text_slide_number_color</code></li>
<li><code>text_font_size</code></li>
<li><code>text_slide_number_font_size</code></li>
<li><em>and more …</em></li>
</ul>
<p>And here are the title slide theme options:</p>
<ul>
<li><code>title_slide_text_color</code></li>
<li><code>title_slide_background_color</code></li>
<li><code>title_slide_background_image</code></li>
<li><code>title_slide_background_size</code></li>
<li><code>title_slide_background_position</code></li>
</ul>
</div>
<div id="fonts" class="section level2">
<h2 class="hasAnchor">
<a href="#fonts" class="anchor"></a>Fonts</h2>
<!-- Need to set [adding-custom-css] -->
<div id="default-fonts" class="section level3">
<h3 class="hasAnchor">
<a href="#default-fonts" class="anchor"></a>Default Fonts</h3>
<p><strong>xaringanthemer</strong> by default uses a different set of default fonts for heading and body fonts. The new defaults use <a href="https://fonts.google.com/specimen/Cabin">Cabin</a> for headings and <a href="https://fonts.google.com/specimen/Noto+Sans">Noto Sans</a> for body text. These fonts are easier to read on screens and at a distance during presentations, and they support a wide variety of languages and weights. Another reason for the change is that the xaringan (remarkjs) default body font, <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>
<div class="sourceCode" id="cb15"><pre class="r"><span class="fu"><a href="reference/style_xaringan.html">style_xaringan</a></span>(
  <span class="kw">text_font_family</span> <span class="kw">=</span> <span class="st">"Droid Serif"</span>,
  <span class="kw">text_font_url</span> <span class="kw">=</span> <span class="st">"https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic"</span>,
  <span class="kw">header_font_google</span> <span class="kw">=</span> <span class="fu"><a href="reference/google_font.html">google_font</a></span>(<span class="st">"Yanone Kaffeesatz"</span>)
)</pre></div>
</div>
<div id="custom-and-google-font-fonts" class="section level3">
<h3 class="hasAnchor">
<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>To use <a href="https://fonts.google.com">Google Fonts</a>, set the <code>&lt;type&gt;_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="cb16"><pre class="r"><span class="fu"><a href="reference/style_mono_light.html">style_mono_light</a></span>(
  <span class="kw">header_font_google</span> <span class="kw">=</span> <span class="fu"><a href="reference/google_font.html">google_font</a></span>(<span class="st">"Josefin Slab"</span>, <span class="st">"600"</span>),
  <span class="kw">text_font_google</span>   <span class="kw">=</span> <span class="fu"><a href="reference/google_font.html">google_font</a></span>(<span class="st">"Work Sans"</span>, <span class="st">"300"</span>, <span class="st">"300i"</span>),
  <span class="kw">code_font_google</span>   <span class="kw">=</span> <span class="fu"><a href="reference/google_font.html">google_font</a></span>(<span class="st">"IBM Plex Mono"</span>)
)</pre></div>
<p>If you set an <code>&lt;type&gt;_font_google</code> theme arguments, then <code>&lt;type&gt;_font_family</code>, <code>&lt;type&gt;_font_weight</code> and <code>&lt;type&gt;_font_url</code> are overwritten – where <code>&lt;type&gt;</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>&lt;type&gt;_font_family</code> and <code>&lt;type&gt;_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="cb17"><pre class="r"><span class="fu"><a href="reference/style_solarized_dark.html">style_solarized_dark</a></span>(
  <span class="kw">code_font_family</span> <span class="kw">=</span> <span class="st">"Fira Code"</span>,
  <span class="kw">code_font_url</span> <span class="kw">=</span> <span class="st">"https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/fira_code.css"</span>
)</pre></div>
<p>Remember that you need to supply either <code>&lt;type&gt;_google_font</code> using the <code><a href="reference/google_font.html">google_font()</a></code> helper <em>or both</em> <code>&lt;type&gt;_font_family</code> and <code>&lt;type&gt;_font_url</code>.</p>
</div>
<div id="using-additional-fonts" class="section level3">
<h3 class="hasAnchor">
<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>
<div class="sourceCode" id="cb18"><pre class="r"><span class="fu"><a href="reference/style_mono_light.html">style_mono_light</a></span>(
  <span class="kw">extra_fonts</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
    <span class="fu"><a href="reference/google_font.html">google_font</a></span>(<span class="st">"Sofia"</span>),
    <span class="co"># Young Serif by uplaod.fr</span>
    <span class="st">"https://cdn.jsdelivr.net/gh/uplaod/YoungSerif/fonts/webfonts/fontface.css"</span>,
  ),
  <span class="kw">extra_css</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
    <span class="st">".title-slide h2"</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="st">"font-family"</span> <span class="kw">=</span> <span class="st">"Sofia"</span>),
    <span class="kw">blockquote</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="st">"font-family"</span> <span class="kw">=</span> <span class="st">"youngserifregular"</span>)
  )
)</pre></div>
</div>
</div>
<div id="colors" class="section level2">
<h2 class="hasAnchor">
<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>The <code>style*()</code> functions in xaringanthemer include a <code>colors</code> argument that lets you quickly define a additional colors to use in your slides. This argument takes a vector of named colors</p>
<div class="sourceCode" id="cb19"><pre class="r"><span class="no">colors</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span>(
  <span class="kw">red</span> <span class="kw">=</span> <span class="st">"#f34213"</span>,
  <span class="kw">purple</span> <span class="kw">=</span> <span class="st">"#3e2f5b"</span>,
  <span class="kw">orange</span> <span class="kw">=</span> <span class="st">"#ff8811"</span>,
  <span class="kw">green</span> <span class="kw">=</span> <span class="st">"#136f63"</span>,
  <span class="kw">white</span> <span class="kw">=</span> <span class="st">"#FFFFFF"</span>,
)</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>So slide text like this</p>
<div class="sourceCode" id="cb20"><pre class="sourceCode markdown"><code class="sourceCode markdown"><a class="sourceLine" id="cb20-1" data-line-number="1">This **.red[simple]** .white.bg-purple[demo] </a>
<a class="sourceLine" id="cb20-2" data-line-number="2">_.orange[shows]_ the colors .green[in action].</a></code></pre></div>
<p>will be rendered in HTML as</p>
<blockquote>
<p>This <strong><span style="color: #f34213">simple</span></strong> <span style="color:#FFFFFF;background-color:#3e2f5b;">demo</span> <em style="color:#ff8811">shows</em> the colors <span style="color:#136f63">in action</span>.</p>
</blockquote>
<p>Note that the color names in <code>colors</code> need to be valid CSS names, so <code>"purple-light"</code> will work, but <code>"purple light"</code> will not.</p>
</div>
<div id="adding-custom-css" class="section level2">
<h2 class="hasAnchor">
<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>
<div class="sourceCode" id="cb21"><pre class="r"><span class="no">extra_css</span> <span class="kw">&lt;-</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
  <span class="st">".small"</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="st">"font-size"</span> <span class="kw">=</span> <span class="st">"90%"</span>),
  <span class="st">".full-width"</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
    <span class="kw">display</span> <span class="kw">=</span> <span class="st">"flex"</span>,
    <span class="kw">width</span>   <span class="kw">=</span> <span class="st">"100%"</span>,
    <span class="kw">flex</span>    <span class="kw">=</span> <span class="st">"1 1 auto"</span>
  )
)</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>
<div class="sourceCode" id="cb22"><pre class="r"><span class="fu"><a href="reference/style_extra_css.html">style_extra_css</a></span>(<span class="kw">css</span> <span class="kw">=</span> <span class="no">extra_css</span>, <span class="kw">outfile</span> <span class="kw">=</span> <span class="st">"custom.css"</span>)</pre></div>
<div class="sourceCode" id="cb23"><pre class="sourceCode css"><code class="sourceCode css"><a class="sourceLine" id="cb23-1" data-line-number="1"><span class="co">/* Extra CSS */</span></a>
<a class="sourceLine" id="cb23-2" data-line-number="2"><span class="fu">.small</span> {</a>
<a class="sourceLine" id="cb23-3" data-line-number="3">  <span class="kw">font-size</span>: <span class="dv">90%</span>;</a>
<a class="sourceLine" id="cb23-4" data-line-number="4">}</a>
<a class="sourceLine" id="cb23-5" data-line-number="5"><span class="fu">.full-width</span> {</a>
<a class="sourceLine" id="cb23-6" data-line-number="6">  <span class="kw">display</span>: flex;</a>
<a class="sourceLine" id="cb23-7" data-line-number="7">  <span class="kw">width</span>: <span class="dv">100%</span>;</a>
<a class="sourceLine" id="cb23-8" data-line-number="8">  <span class="kw">flex</span>: <span class="dv">1</span> <span class="dv">1</span> <span class="dv">auto</span>;</a>
<a class="sourceLine" id="cb23-9" data-line-number="9">}</a></code></pre></div>
<p>This is most helpful when wanting to define helper classes to work with the <a href="https://github.com/gnab/remark">remark.js</a> <code>.class[]</code> syntax. Using the above example, we could add slide text <code>.small[in smaller font size]</code>.</p>
<hr>
<p><strong>xaringanthemer</strong> was built by <a href="https://www.garrickadenbuie.com">Garrick Aden-Buie</a> (<a href="https://twitter.com/grrrck">@grrrck</a>).</p>
<p>Big thank you to <a href="https://yihui.name">Yihui Xie</a>, especially for <a href="https://github.com/yihui/xaringan">xaringan</a>. Also thanks to <a href="http://gnab.org">Ole Petter Bang</a> for <a href="https://github.com/gnab/remark">remark.js</a>.</p>
<p>Feel free to <a href="https://github.com/gadenbuie/xaringanthemer/issues">file an issue</a> if you find a bug or have a theme suggestion – or better yet, submit a pull request!</p>
</div>
</div>
  </div>

  <div class="col-md-3 hidden-xs hidden-sm" id="pkgdown-sidebar">
    <div class="links">
<h2>Links</h2>
<ul class="list-unstyled">
<li>Browse source code at <br><a href="https://github.com/gadenbuie/xaringanthemer/">https://github.com/gadenbuie/xaringanthemer/</a>
</li>
<li>Report a bug at <br><a href="https://github.com/gadenbuie/xaringanthemer/issues">https://github.com/gadenbuie/xaringanthemer/issues</a>
</li>
</ul>
</div>
<div class="license">
<h2>License</h2>
<ul class="list-unstyled">
<li><a href="LICENSE.html">Full license</a></li>
<li><small><a href="https://opensource.org/licenses/mit-license.php">MIT</a> + file <a href="LICENSE-text.html">LICENSE</a></small></li>
</ul>
</div>
<div class="developers">
<h2>Developers</h2>
<ul class="list-unstyled">
<li>
<a href="https://www.garrickadenbuie.com">Garrick Aden-Buie</a> <br><small class="roles"> Author, maintainer </small> <a href="https://orcid.org/0000-0002-7111-0077" target="orcid.widget" aria-label="ORCID"><span class="fab fa-orcid orcid" aria-hidden="true"></span></a> </li>
</ul>
</div>

  <div class="dev-status">
<h2>Dev status</h2>
<ul class="list-unstyled">
<li><a href="https://CRAN.R-project.org/package=xaringanthemer"><img src="https://www.r-pkg.org/badges/version/xaringanthemer" alt="CRAN status"></a></li>
<li><a href="https://www.tidyverse.org/lifecycle/#stable"><img src="https://img.shields.io/badge/lifecycle-stable-brightgreen.svg" alt="Lifecycle: stable"></a></li>
<li><a href="https://travis-ci.com/gadenbuie/xaringanthemer"><img src="https://travis-ci.com/gadenbuie/xaringanthemer.svg?branch=master" alt="travis"></a></li>
<li><a href="https://codecov.io/github/gadenbuie/xaringanthemer"><img src="https://img.shields.io/codecov/c/github/gadenbuie/xaringanthemer" alt="Codecov"></a></li>
</ul>
</div>
</div>
</div>


      <footer><div class="copyright">
  <p>Developed by <a href="https://www.garrickadenbuie.com">Garrick Aden-Buie</a>.</p>
</div>

<div class="pkgdown">
  <p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.5.1.</p>
</div>

      </footer>
</div>

  
  </body>
</html>