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.
2 Комити
5 Гране
Дрво: 82f47b8180
Гране Ознаке
${ item.name }
Create branch ${ searchTerm }
from '82f47b8180'
${ noResults }
xaringanthemer/articles/articles/themes.html

276 lines
15KB
Датотека 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/themes.html">Themes</a>

  49. </li>

  50. <li>

  51.   <a href="../../articles/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="../../reference/index.html">Reference</a>

  58. </li>

  59. <li class="dropdown">

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

  61.     Articles

  62.      

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

  64.   </a>

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

  66. <li>

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

  68.     </li>

  69.     <li>

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

  71.     </li>

  72.     <li>

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

  74.     </li>

  75.     <li>

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

  77.     </li>

  78.   </ul>

  79. </li>

  80.       </ul>

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

  82. <li>

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

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

  85.      

  86.   </a>

  87. </li>

  88.       </ul>

  89. </div>

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

  91.   </div>

  92. <!--/.container -->

  93. </div>

  94. <!--/.navbar -->

  95. 

  96.       

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

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

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

  100.       <h1>Themes</h1>

  101.             

  102.       

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

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

  105. 

  106.     </div>

  107. 

  108.     

  109.     

  110. <div id="xaringanthemer-theme-functions" class="section level1">

  111. <h1 class="hasAnchor">

  112. <a href="#xaringanthemer-theme-functions" class="anchor"></a>xaringanthemer Theme Functions</h1>

  113. <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">library</span>(xaringanthemer)</a></code></pre></div>

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

  115. <h3 class="hasAnchor">

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

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

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

  119. <h4 class="hasAnchor">

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

  121. </h4>

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

  123. <div class="sourceCode" id="cb2"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb2-1" data-line-number="1">demo_function_call &lt;-<span class="st"> </span><span class="cf">function</span>(f, <span class="dt">n_params =</span> <span class="dv">1</span>) {</a>

  124. <a class="sourceLine" id="cb2-2" data-line-number="2">  <span class="kw">cat</span>(<span class="dt">sep =</span> <span class="st">""</span>,</a>

  125. <a class="sourceLine" id="cb2-3" data-line-number="3">    <span class="st">"```r</span><span class="ch">\n</span><span class="st">"</span>,</a>

  126. <a class="sourceLine" id="cb2-4" data-line-number="4">    <span class="kw">paste</span>(<span class="kw">substitute</span>(f)), <span class="st">"("</span>,</a>

  127. <a class="sourceLine" id="cb2-5" data-line-number="5">    <span class="cf">if</span> (n_params <span class="op">&gt;</span><span class="st"> </span><span class="dv">0</span>) <span class="kw">paste</span>(<span class="dt">collapse =</span> <span class="st">", "</span>,</a>

  128. <a class="sourceLine" id="cb2-6" data-line-number="6">      <span class="kw">sapply</span>(<span class="dv">1</span><span class="op">:</span>n_params, <span class="cf">function</span>(i) {</a>

  129. <a class="sourceLine" id="cb2-7" data-line-number="7">        <span class="kw">paste0</span>(<span class="kw">names</span>(<span class="kw">formals</span>(f))[i], <span class="st">' = "'</span>, <span class="kw">formals</span>(f)[[i]], <span class="st">'"'</span>)})),</a>

  130. <a class="sourceLine" id="cb2-8" data-line-number="8">    <span class="st">")</span><span class="ch">\n</span><span class="st">```"</span></a>

  131. <a class="sourceLine" id="cb2-9" data-line-number="9">    )</a>

  132. <a class="sourceLine" id="cb2-10" data-line-number="10">}</a>

  133. <a class="sourceLine" id="cb2-11" data-line-number="11"><span class="kw">demo_function_call</span>(mono_light, <span class="dv">1</span>)</a></code></pre></div>

  134. <pre><code>## ```r

  135. ## mono_light(base_color = "#23395b")

  136. ## ```</code></pre>

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

  138. </div>

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

  140. <h4 class="hasAnchor">

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

  142. </h4>

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

  144. <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">demo_function_call</span>(mono_dark, <span class="dv">1</span>)</a></code></pre></div>

  145. <pre><code>## ```r

  146. ## mono_dark(base_color = "#cbf7ed")

  147. ## ```</code></pre>

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

  149. </div>

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

  151. <h4 class="hasAnchor">

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

  153. </h4>

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

  155. <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">demo_function_call</span>(mono_accent, <span class="dv">1</span>)</a></code></pre></div>

  156. <pre><code>## ```r

  157. ## mono_accent(base_color = "#43418A")

  158. ## ```</code></pre>

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

  160. </div>

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

  162. <h4 class="hasAnchor">

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

  164. </h4>

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

  166. <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">demo_function_call</span>(mono_accent_inverse, <span class="dv">1</span>)</a></code></pre></div>

  167. <pre><code>## ```r

  168. ## mono_accent_inverse(base_color = "#3C989E")

  169. ## ```</code></pre>

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

  171. </div>

  172. </div>

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

  174. <h3 class="hasAnchor">

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

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

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

  178. <h4 class="hasAnchor">

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

  180. </h4>

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

  182. <div class="sourceCode" id="cb10"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb10-1" data-line-number="1"><span class="kw">demo_function_call</span>(duo, <span class="dv">2</span>)</a></code></pre></div>

  183. <pre><code>## ```r

  184. ## duo(primary_color = "#1F4257", secondary_color = "#F97B64")

  185. ## ```</code></pre>

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

  187. </div>

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

  189. <h4 class="hasAnchor">

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

  191. </h4>

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

  193. <div class="sourceCode" id="cb12"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb12-1" data-line-number="1"><span class="kw">demo_function_call</span>(duo_accent, <span class="dv">2</span>)</a></code></pre></div>

  194. <pre><code>## ```r

  195. ## duo_accent(primary_color = "#006747", secondary_color = "#CFC493")

  196. ## ```</code></pre>

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

  198. </div>

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

  200. <h4 class="hasAnchor">

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

  202. </h4>

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

  204. <div class="sourceCode" id="cb14"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb14-1" data-line-number="1"><span class="kw">demo_function_call</span>(duo_accent_inverse, <span class="dv">2</span>)</a></code></pre></div>

  205. <pre><code>## ```r

  206. ## duo_accent_inverse(primary_color = "#006747", secondary_color = "#CFC493")

  207. ## ```</code></pre>

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

  209. </div>

  210. </div>

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

  212. <h3 class="hasAnchor">

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

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

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

  216. <h4 class="hasAnchor">

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

  218. </h4>

  219. <div class="sourceCode" id="cb16"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb16-1" data-line-number="1"><span class="kw">demo_function_call</span>(solarized_light, <span class="dv">0</span>)</a></code></pre></div>

  220. <pre><code>## ```r

  221. ## solarized_light()

  222. ## ```</code></pre>

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

  224. </div>

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

  226. <h4 class="hasAnchor">

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

  228. </h4>

  229. <div class="sourceCode" id="cb18"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb18-1" data-line-number="1"><span class="kw">demo_function_call</span>(solarized_dark, <span class="dv">0</span>)</a></code></pre></div>

  230. <pre><code>## ```r

  231. ## solarized_dark()

  232. ## ```</code></pre>

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

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

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

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

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

  238. <a class="sourceLine" id="cb20-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>

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

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

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

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

  243. </div>

  244. </div>

  245. </div>

  246.   </div>

  247. 

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

  249.         <div id="tocnav">

  250.       <h2 class="hasAnchor">

  251. <a href="#tocnav" class="anchor"></a>Contents</h2>

  252.       <ul class="nav nav-pills nav-stacked">

  253. <li><a href="#xaringanthemer-theme-functions">xaringanthemer Theme Functions</a></li>

  254.       </ul>

  255. </div>

  256.       </div>

  257. 

  258. </div>

  259. 

  260. 

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

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

  263. </div>

  264. 

  265. <div class="pkgdown">

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

  267. </div>

  268. 

  269.       </footer>

  270. </div>

  271. 

  272.   

  273. 

  274.   </body>

  275. </html>