garrick
/
xaringanthemer
огледало од https://github.com/gadenbuie/xaringanthemer.git
Прати 1
Волим 0
Креирај огранак 0
Код Дискусије 0 Издања 10 Вики Activity
😎 Give your xaringan slides some style
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 Комити
5 Гране
Дрво: 82619e3254
Гране Ознаке
${ item.name }
Create branch ${ searchTerm }
from '82619e3254'
${ noResults }
xaringanthemer/docs/articles/singles/themes.html

236 lines
13KB
Датотека Blame Историја 

  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. <li class="dropdown">

  63.   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">

  64.     Articles

  65.      

  66.     <span class="caret"></span>

  67.   </a>

  68.   <ul class="dropdown-menu" role="menu">

  69. <li>

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

  71.     </li>

  72.     <li>

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

  74.     </li>

  75.     <li>

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

  77.     </li>

  78.     <li>

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

  80.     </li>

  81.   </ul>

  82. </li>

  83.       </ul>

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

  85. <li>

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

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

  88.      

  89.   </a>

  90. </li>

  91. <li>

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

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

  94.      

  95.   </a>

  96. </li>

  97.       </ul>

  98. </div>

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

  100.   </div>

  101. <!--/.container -->

  102. </div>

  103. <!--/.navbar -->

  104. 

  105.       

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

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

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

  109.       <h1>Themes</h1>

  110.             

  111.       

  112.       <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>

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

  114. 

  115.     </div>

  116. 

  117.     

  118.     

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

  120. <h3 class="hasAnchor">

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

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

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

  124. <h4 class="hasAnchor">

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

  126. </h4>

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

  128. <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>

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

  130. </div>

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

  132. <h4 class="hasAnchor">

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

  134. </h4>

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

  136. <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>

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

  138. </div>

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

  140. <h4 class="hasAnchor">

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

  142. </h4>

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

  144. <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>

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

  146. </div>

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

  148. <h4 class="hasAnchor">

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

  150. </h4>

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

  152. <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>

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

  154. </div>

  155. </div>

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

  157. <h3 class="hasAnchor">

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

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

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

  161. <h4 class="hasAnchor">

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

  163. </h4>

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

  165. <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>

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

  167. </div>

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

  169. <h4 class="hasAnchor">

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

  171. </h4>

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

  173. <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>

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

  175. </div>

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

  177. <h4 class="hasAnchor">

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

  179. </h4>

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

  181. <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>

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

  183. </div>

  184. </div>

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

  186. <h3 class="hasAnchor">

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

  188. <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>

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

  190. <h4 class="hasAnchor">

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

  192. </h4>

  193. <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>

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

  195. </div>

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

  197. <h4 class="hasAnchor">

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

  199. </h4>

  200. <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>

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

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

  203. <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>

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

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

  206. <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>

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

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

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

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

  211. </div>

  212. </div>

  213.   </div>

  214. 

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

  216.       </div>

  217. 

  218. </div>

  219. 

  220. 

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

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

  223. </div>

  224. 

  225. <div class="pkgdown">

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

  227. </div>

  228. 

  229.       </footer>

  230. </div>

  231. 

  232.   

  233. 

  234.   </body>

  235. </html>