garrick
/
xaringanthemer
miroir de https://github.com/gadenbuie/xaringanthemer.git
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Tickets 0 Versions 10 Wiki Activité
😎 Give your xaringan slides some style
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
69 Révisions
5 Branches
Aborescence: 8431450ec0
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de '8431450ec0'
${ noResults }
xaringanthemer/docs/articles/singles/themes.html

215 lines
12KB
Brut Annotations Historique 

  1. <!DOCTYPE html>

  2. <!-- Generated by pkgdown: do not edit by hand --><html>

  3. <head>

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

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

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

  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">

  8. <title>Themes • xaringanthemer</title>

  9. <!-- jquery --><script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha384-nrOSfDHtoPMzJHjVTdCopGqIqeYETSXhZDFyniQ8ZHcVy08QesyHcnOUpMpqnmWq" crossorigin="anonymous"></script><!-- Bootstrap --><link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/yeti/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

  10. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><!-- Font Awesome icons --><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

  11. <!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js" integrity="sha384-cV+rhyOuRHc9Ub/91rihWcGmMmCXDeksTtCihMupQHSsi8GIIRDG0ThDc3HGQFJ3" crossorigin="anonymous"></script><!-- pkgdown --><link href="../../pkgdown.css" rel="stylesheet">

  12. <script src="../../jquery.sticky-kit.min.js"></script><script src="../../pkgdown.js"></script><meta property="og:title" content="Themes">

  13. <meta property="og:description" content="">

  14. <meta name="twitter:card" content="summary">

  15. <!-- mathjax --><script src="https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><!--[if lt IE 9]>

  16. <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

  17. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

  18. <![endif]-->

  19. </head>

  20. <body>

  21.     <div class="container template-article">

  22.       <header><div class="navbar navbar-default navbar-fixed-top" role="navigation">

  23.   <div class="container">

  24.     <div class="navbar-header">

  25.       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">

  26.         <span class="icon-bar"></span>

  27.         <span class="icon-bar"></span>

  28.         <span class="icon-bar"></span>

  29.       </button>

  30.       <span class="navbar-brand">

  31.         <a class="navbar-link" href="../../index.html">xaringanthemer</a>

  32.         <span class="label label-default" data-toggle="tooltip" data-placement="bottom" title="Released package">0.1.0.9000</span>

  33.       </span>

  34.     </div>

  35. 

  36.     <div id="navbar" class="navbar-collapse collapse">

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

  38. <li>

  39.   <a href="../../index.html">

  40.     <span class="fa fa-home fa-lg"></span>

  41.      

  42.   </a>

  43. </li>

  44. <li>

  45.   <a href="../../articles/xaringanthemer.html">Get started</a>

  46. </li>

  47. <li>

  48.   <a href="../../articles/singles/themes.html">Themes</a>

  49. </li>

  50. <li>

  51.   <a href="../../articles/singles/fonts.html">Fonts</a>

  52. </li>

  53. <li>

  54.   <a href="../../articles/template-variables.html">Template Variables</a>

  55. </li>

  56. <li>

  57.   <a href="../../articles/css-help.html">CSS Help</a>

  58. </li>

  59. <li>

  60.   <a href="../../reference/index.html">Reference</a>

  61. </li>

  62.       </ul>

  63. <ul class="nav navbar-nav navbar-right">

  64. <li>

  65.   <a href="https://github.com/gadenbuie/xaringanthemer">

  66.     <span class="fa fa-github fa-lg"></span>

  67.      

  68.   </a>

  69. </li>

  70. <li>

  71.   <a href="https://twitter.com/grrrck">

  72.     <span class="fa fa-twitter fa-lg"></span>

  73.      

  74.   </a>

  75. </li>

  76.       </ul>

  77. </div>

  78. <!--/.nav-collapse -->

  79.   </div>

  80. <!--/.container -->

  81. </div>

  82. <!--/.navbar -->

  83. 

  84.       

  85.       </header><div class="row">

  86.   <div class="col-md-9 contents">

  87.     <div class="page-header toc-ignore">

  88.       <h1>Themes</h1>

  89.             

  90.       

  91.       <small class="dont-index">Source: <a href="https://github.com/gadenbuie/xaringanthemer/blob/master/vignettes/singles/themes.Rmd"><code>vignettes/singles/themes.Rmd</code></a></small>

  92.       <div class="hidden name"><code>themes.Rmd</code></div>

  93. 

  94.     </div>

  95. 

  96.     

  97.     

  98. <div id="monotone" class="section level3">

  99. <h3 class="hasAnchor">

  100. <a href="#monotone" class="anchor"></a>Monotone</h3>

  101. <p>Use these functions to automatically create a consistent color palette for your slides, based around a single color.</p>

  102. <div id="mono_light" class="section level4">

  103. <h4 class="hasAnchor">

  104. <a href="#mono_light" class="anchor"></a><code><a href="../../reference/mono_light.html">mono_light()</a></code>

  105. </h4>

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

  107. <div class="sourceCode" id="cb1"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb1-1" data-line-number="1"><span class="kw"><a href="../../reference/mono_light.html">mono_light</a></span>(<span class="dt">base_color =</span> <span class="st">"#23395b"</span>)</a></code></pre></div>

  108. <p><img src="../images/example_mono_light.png" width="900"></p>

  109. </div>

  110. <div id="mono_dark" class="section level4">

  111. <h4 class="hasAnchor">

  112. <a href="#mono_dark" class="anchor"></a><code><a href="../../reference/mono_dark.html">mono_dark()</a></code>

  113. </h4>

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

  115. <div class="sourceCode" id="cb2"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb2-1" data-line-number="1"><span class="kw"><a href="../../reference/mono_dark.html">mono_dark</a></span>(<span class="dt">base_color =</span> <span class="st">"#cbf7ed"</span>)</a></code></pre></div>

  116. <p><img src="../images/example_mono_dark.png" width="900"></p>

  117. </div>

  118. <div id="mono_accent" class="section level4">

  119. <h4 class="hasAnchor">

  120. <a href="#mono_accent" class="anchor"></a><code><a href="../../reference/mono_accent.html">mono_accent()</a></code>

  121. </h4>

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

  123. <div class="sourceCode" id="cb3"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb3-1" data-line-number="1"><span class="kw"><a href="../../reference/mono_accent.html">mono_accent</a></span>(<span class="dt">base_color =</span> <span class="st">"#43418A"</span>)</a></code></pre></div>

  124. <p><img src="../images/example_mono_accent.png" width="900"></p>

  125. </div>

  126. <div id="mono_accent_inverse" class="section level4">

  127. <h4 class="hasAnchor">

  128. <a href="#mono_accent_inverse" class="anchor"></a><code><a href="../../reference/mono_accent_inverse.html">mono_accent_inverse()</a></code>

  129. </h4>

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

  131. <div class="sourceCode" id="cb4"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb4-1" data-line-number="1"><span class="kw"><a href="../../reference/mono_accent_inverse.html">mono_accent_inverse</a></span>(<span class="dt">base_color =</span> <span class="st">"#3C989E"</span>)</a></code></pre></div>

  132. <p><img src="../images/example_mono_accent_inverse.png" width="900"></p>

  133. </div>

  134. </div>

  135. <div id="duotone" class="section level3">

  136. <h3 class="hasAnchor">

  137. <a href="#duotone" class="anchor"></a>Duotone</h3>

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

  139. <div id="duo" class="section level4">

  140. <h4 class="hasAnchor">

  141. <a href="#duo" class="anchor"></a><code><a href="../../reference/duo.html">duo()</a></code>

  142. </h4>

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

  144. <div class="sourceCode" id="cb5"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb5-1" data-line-number="1"><span class="kw"><a href="../../reference/duo.html">duo</a></span>(<span class="dt">primary_color =</span> <span class="st">"#1F4257"</span>, <span class="dt">secondary_color =</span> <span class="st">"#F97B64"</span>)</a></code></pre></div>

  145. <p><img src="../images/example_duo.png" width="900"></p>

  146. </div>

  147. <div id="duo_accent" class="section level4">

  148. <h4 class="hasAnchor">

  149. <a href="#duo_accent" class="anchor"></a><code><a href="../../reference/duo_accent.html">duo_accent()</a></code>

  150. </h4>

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

  152. <div class="sourceCode" id="cb6"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb6-1" data-line-number="1"><span class="kw"><a href="../../reference/duo_accent.html">duo_accent</a></span>(<span class="dt">primary_color =</span> <span class="st">"#006747"</span>, <span class="dt">secondary_color =</span> <span class="st">"#CFC493"</span>)</a></code></pre></div>

  153. <p><img src="../images/example_duo_accent.png" width="1350"></p>

  154. </div>

  155. <div id="duo_accent_inverse" class="section level4">

  156. <h4 class="hasAnchor">

  157. <a href="#duo_accent_inverse" class="anchor"></a><code><a href="../../reference/duo_accent_inverse.html">duo_accent_inverse()</a></code>

  158. </h4>

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

  160. <div class="sourceCode" id="cb7"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb7-1" data-line-number="1"><span class="kw"><a href="../../reference/duo_accent_inverse.html">duo_accent_inverse</a></span>(<span class="dt">primary_color =</span> <span class="st">"#006747"</span>, <span class="dt">secondary_color =</span> <span class="st">"#CFC493"</span>)</a></code></pre></div>

  161. <p><img src="../images/example_duo_accent_inverse.png" width="1350"></p>

  162. </div>

  163. </div>

  164. <div id="solarized" class="section level3">

  165. <h3 class="hasAnchor">

  166. <a href="#solarized" class="anchor"></a>Solarized</h3>

  167. <p>There are also two themes based around the <a href="http://ethanschoonover.com/solarized">solarized color palette</a>, <code><a href="../../reference/solarized_light.html">solarized_light()</a></code> and <code><a href="../../reference/solarized_dark.html">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>

  168. <div id="solarized_light" class="section level4">

  169. <h4 class="hasAnchor">

  170. <a href="#solarized_light" class="anchor"></a><code><a href="../../reference/solarized_light.html">solarized_light()</a></code>

  171. </h4>

  172. <div class="sourceCode" id="cb8"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb8-1" data-line-number="1"><span class="kw"><a href="../../reference/solarized_light.html">solarized_light</a></span>()</a></code></pre></div>

  173. <p><img src="../images/example_solarized_light.png" width="900"></p>

  174. </div>

  175. <div id="solarized_dark" class="section level4">

  176. <h4 class="hasAnchor">

  177. <a href="#solarized_dark" class="anchor"></a><code><a href="../../reference/solarized_dark.html">solarized_dark()</a></code>

  178. </h4>

  179. <div class="sourceCode" id="cb9"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb9-1" data-line-number="1"><span class="kw"><a href="../../reference/solarized_dark.html">solarized_dark</a></span>()</a></code></pre></div>

  180. <p><img src="../images/example_solarized_dark.png" width="900"></p>

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

  182. <div class="sourceCode" id="cb10"><pre class="sourceCode yaml"><code class="sourceCode yaml"><a class="sourceLine" id="cb10-1" data-line-number="1"><span class="fu">output:</span></a>

  183. <a class="sourceLine" id="cb10-2" data-line-number="2">  <span class="fu">xaringan:</span><span class="at">:moon_reader:</span></a>

  184. <a class="sourceLine" id="cb10-3" data-line-number="3">    <span class="fu">lib_dir:</span><span class="at"> libs</span></a>

  185. <a class="sourceLine" id="cb10-4" data-line-number="4">    <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>

  186. <a class="sourceLine" id="cb10-5" data-line-number="5">    <span class="fu">nature:</span></a>

  187. <a class="sourceLine" id="cb10-6" data-line-number="6">      <span class="fu">highlightStyle:</span><span class="at"> solarized-dark</span></a>

  188. <a class="sourceLine" id="cb10-7" data-line-number="7">      <span class="fu">highlightLines:</span><span class="at"> true</span></a>

  189. <a class="sourceLine" id="cb10-8" data-line-number="8">      <span class="fu">countIncrementalSlides:</span><span class="at"> false</span></a></code></pre></div>

  190. </div>

  191. </div>

  192.   </div>

  193. 

  194.   <div class="col-md-3 hidden-xs hidden-sm" id="sidebar">

  195.       </div>

  196. 

  197. </div>

  198. 

  199. 

  200.       <footer><div class="copyright">

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

  202. </div>

  203. 

  204. <div class="pkgdown">

  205.   <p>Site built with <a href="http://pkgdown.r-lib.org/">pkgdown</a>.</p>

  206. </div>

  207. 

  208.       </footer>

  209. </div>

  210. 

  211.   

  212. 

  213.   </body>

  214. </html>