garrick
/
xaringanthemer
réplica de https://github.com/gadenbuie/xaringanthemer.git
Seguir 1
Destacar 0
Fork 0
Código Incidencias 0 Lanzamientos 10 Wiki Actividad
😎 Give your xaringan slides some style
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
69 Commits
5 Ramas
Árbol: 8431450ec0
Ramas Etiquetas
${ item.name }
Crear rama ${ searchTerm }
desde '8431450ec0'
${ noResults }
xaringanthemer/docs/articles/singles/themes.html

215 líneas
12KB
Original Blame Histórico 

  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>