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.
521 Révisions
5 Branches
Aborescence: a54b975fa2
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de 'a54b975fa2'
${ noResults }
xaringanthemer/reference/choose_dark_or_light.html

125 lines
11KB
Brut Annotations Historique 

  1. <!DOCTYPE html>

  2. <!-- 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, shrink-to-fit=no"><title>Choose dark or light color — choose_dark_or_light • xaringanthemer</title><!-- favicons --><link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png"><link rel="apple-touch-icon" type="image/png" sizes="180x180" href="../apple-touch-icon.png"><link rel="apple-touch-icon" type="image/png" sizes="120x120" href="../apple-touch-icon-120x120.png"><link rel="apple-touch-icon" type="image/png" sizes="76x76" href="../apple-touch-icon-76x76.png"><link rel="apple-touch-icon" type="image/png" sizes="60x60" href="../apple-touch-icon-60x60.png"><script src="../deps/jquery-3.6.0/jquery-3.6.0.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link href="../deps/bootstrap-5.3.1/bootstrap.min.css" rel="stylesheet"><script src="../deps/bootstrap-5.3.1/bootstrap.bundle.min.js"></script><link href="../deps/IBM_Plex_Mono-0.4.9/font.css" rel="stylesheet"><link href="../deps/Outfit-0.4.9/font.css" rel="stylesheet"><link href="../deps/font-awesome-6.4.2/css/all.min.css" rel="stylesheet"><link href="../deps/font-awesome-6.4.2/css/v4-shims.min.css" rel="stylesheet"><script src="../deps/headroom-0.11.0/headroom.min.js"></script><script src="../deps/headroom-0.11.0/jQuery.headroom.min.js"></script><script src="../deps/bootstrap-toc-1.0.1/bootstrap-toc.min.js"></script><script src="../deps/clipboard.js-2.0.11/clipboard.min.js"></script><script src="../deps/search-1.0.0/autocomplete.jquery.min.js"></script><script src="../deps/search-1.0.0/fuse.min.js"></script><script src="../deps/search-1.0.0/mark.min.js"></script><!-- pkgdown --><script src="../pkgdown.js"></script><link href="../extra.css" rel="stylesheet"><meta property="og:title" content="Choose dark or light color — choose_dark_or_light"><meta name="description" content="Takes a color input as x and returns either the black or white color (or

  3. expression) if dark or light text should be used over the input color for

  4. best contrast. Follows W3C Recommendations."><meta property="og:description" content="Takes a color input as x and returns either the black or white color (or

  5. expression) if dark or light text should be used over the input color for

  6. best contrast. Follows W3C Recommendations."><meta property="og:image" content="https://pkg.garrickadenbuie.com/xaringanthemer/logo.png"><meta name="twitter:card" content="summary"><meta name="twitter:creator" content="@grrrck"><meta name="twitter:site" content="@grrrck"></head><body>

  7.     <a href="#main" class="visually-hidden-focusable">Skip to contents</a>

  8. 

  9. 

  10.     <nav class="navbar navbar-expand-lg fixed-top bg-light" data-bs-theme="light" aria-label="Site navigation"><div class="container">

  11. 

  12.     <a class="navbar-brand me-2" href="../index.html">xaringanthemer</a>

  13. 

  14.     <small class="nav-text text-muted me-auto" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Released version">0.4.3</small>

  15. 

  16. 

  17.     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">

  18.       <span class="navbar-toggler-icon"></span>

  19.     </button>

  20. 

  21.     <div id="navbar" class="collapse navbar-collapse ms-3">

  22.       <ul class="navbar-nav me-auto"><li class="nav-item"><a class="nav-link" href="../articles/xaringanthemer.html">Features</a></li>

  23. <li class="active nav-item"><a class="nav-link" href="../reference/index.html">Reference</a></li>

  24. <li class="nav-item dropdown">

  25.   <button class="nav-link dropdown-toggle" type="button" id="dropdown-themes" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">Themes</button>

  26.   <ul class="dropdown-menu" aria-labelledby="dropdown-themes"><li><h6 class="dropdown-header" data-toc-skip>Themes</h6></li>

  27.     <li><a class="dropdown-item" href="../articles/themes.html">Slide Themes</a></li>

  28.     <li><a class="dropdown-item" href="../articles/ggplot2-themes.html">ggplot2 Themes</a></li>

  29.     <li><hr class="dropdown-divider"></li>

  30.     <li><h6 class="dropdown-header" data-toc-skip>More Customization</h6></li>

  31.     <li><a class="dropdown-item" href="../articles/fonts.html">Fonts</a></li>

  32.     <li><a class="dropdown-item" href="../articles/template-variables.html">Template Variables</a></li>

  33.   </ul></li>

  34.       </ul><ul class="navbar-nav"><li class="nav-item dropdown">

  35.   <button class="nav-link dropdown-toggle" type="button" id="dropdown-" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true"><span class="fa far fa-newspaper fa-lg"></span> </button>

  36.   <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdown-"><li><a class="external-link dropdown-item" href="https://garrickadenbuie.com/blog/xaringanthemer-v0-3-0/">xaringanthemer 0.3.0</a></li>

  37.     <li><hr class="dropdown-divider"></li>

  38.     <li><a class="dropdown-item" href="../news/index.html">Changelog</a></li>

  39.   </ul></li>

  40. <li class="nav-item"><a class="external-link nav-link" href="https://github.com/gadenbuie/xaringanthemer"><span class="fa fab fa-github fa-lg"></span></a></li>

  41. <li class="nav-item"><a class="external-link nav-link" href="https://twitter.com/grrrck"><span class="fa fab fa-twitter fa-lg"></span></a></li>

  42. <li class="nav-item"><a class="external-link nav-link" href="https://www.garrickadenbuie.com"><span class="fa fas fa-home fa-lg"></span></a></li>

  43.       </ul></div>

  44. 

  45. 

  46.   </div>

  47. </nav><div class="container template-reference-topic">

  48. <div class="row">

  49.   <main id="main" class="col-md-9"><div class="page-header">

  50.       <img src="../logo.png" class="logo" alt=""><h1>Choose dark or light color</h1>

  51.       <small class="dont-index">Source: <a href="https://github.com/gadenbuie/xaringanthemer/blob/v0.4.3/R/color.R" class="external-link"><code>R/color.R</code></a></small>

  52.       <div class="d-none name"><code>choose_dark_or_light.Rd</code></div>

  53.     </div>

  54. 

  55.     <div class="ref-description section level2">

  56.     <p>Takes a color input as <code>x</code> and returns either the black or white color (or

  57. expression) if dark or light text should be used over the input color for

  58. best contrast. Follows W3C Recommendations.</p>

  59.     </div>

  60. 

  61.     <div class="section level2">

  62.     <h2 id="ref-usage">Usage<a class="anchor" aria-label="anchor" href="#ref-usage"></a></h2>

  63.     <div class="sourceCode"><pre class="sourceCode r"><code><span><span class="fu">choose_dark_or_light</span><span class="op">(</span><span class="va">x</span>, black <span class="op">=</span> <span class="st">"#000000"</span>, white <span class="op">=</span> <span class="st">"#FFFFFF"</span><span class="op">)</span></span></code></pre></div>

  64.     </div>

  65. 

  66.     <div class="section level2">

  67.     <h2 id="arguments">Arguments<a class="anchor" aria-label="anchor" href="#arguments"></a></h2>

  68. 

  69. 

  70. <dl><dt id="arg-x">x<a class="anchor" aria-label="anchor" href="#arg-x"></a></dt>

  71. <dd><p>The background color (hex)</p></dd>

  72. 

  73. 

  74. <dt id="arg-black">black<a class="anchor" aria-label="anchor" href="#arg-black"></a></dt>

  75. <dd><p>Text or foreground color, e.g. "#222" or

  76. <code>substitute(darken_color(x, 0.8))</code>, if black text provides the best contrast.</p></dd>

  77. 

  78. 

  79. <dt id="arg-white">white<a class="anchor" aria-label="anchor" href="#arg-white"></a></dt>

  80. <dd><p>Text or foreground color or expression, e.g. "#EEE" or

  81. <code>substitute(lighten_color(x, 0.8))</code>, if white text provides the best contrast.</p></dd>

  82. 

  83. </dl></div>

  84.     <div class="section level2">

  85.     <h2 id="value">Value<a class="anchor" aria-label="anchor" href="#value"></a></h2>

  86.     <p>The <code>black</code> color or <code>white</code> color according to which color provides

  87. the greates contrast with the input color.</p>

  88.     </div>

  89.     <div class="section level2">

  90.     <h2 id="references">References<a class="anchor" aria-label="anchor" href="#references"></a></h2>

  91.     <p><a href="https://stackoverflow.com/a/3943023/2022615" class="external-link">https://stackoverflow.com/a/3943023/2022615</a></p>

  92.     </div>

  93. 

  94.     <div class="section level2">

  95.     <h2 id="ref-examples">Examples<a class="anchor" aria-label="anchor" href="#ref-examples"></a></h2>

  96.     <div class="sourceCode"><pre class="sourceCode r"><code><span class="r-in"><span><span class="va">light_green</span> <span class="op">&lt;-</span> <span class="st">"#c4d6b0"</span></span></span>

  97. <span class="r-in"><span><span class="va">contrast_green</span> <span class="op">&lt;-</span> <span class="fu">choose_dark_or_light</span><span class="op">(</span><span class="va">light_green</span><span class="op">)</span></span></span>

  98. <span class="r-in"><span><span class="va">dark_purple</span> <span class="op">&lt;-</span> <span class="st">"#381d2a"</span></span></span>

  99. <span class="r-in"><span><span class="va">contrast_purple</span> <span class="op">&lt;-</span> <span class="fu">choose_dark_or_light</span><span class="op">(</span><span class="va">dark_purple</span><span class="op">)</span></span></span>

  100. <span class="r-in"><span></span></span>

  101. <span class="r-in"><span><span class="kw">if</span> <span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/base/ns-load.html" class="external-link">requireNamespace</a></span><span class="op">(</span><span class="st">"scales"</span>, quietly <span class="op">=</span> <span class="cn">TRUE</span><span class="op">)</span><span class="op">)</span> <span class="op">{</span></span></span>

  102. <span class="r-in"><span>  <span class="fu">scales</span><span class="fu">::</span><span class="fu"><a href="https://scales.r-lib.org/reference/show_col.html" class="external-link">show_col</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/base/c.html" class="external-link">c</a></span><span class="op">(</span><span class="va">light_green</span>, <span class="va">contrast_green</span>, <span class="va">dark_purple</span>, <span class="va">contrast_purple</span><span class="op">)</span><span class="op">)</span></span></span>

  103. <span class="r-in"><span><span class="op">}</span></span></span>

  104. <span class="r-plt img"><img src="choose_dark_or_light-1.png" alt="" width="700" height="433"></span>

  105. </code></pre></div>

  106.     </div>

  107.   </main><aside class="col-md-3"><nav id="toc" aria-label="Table of contents"><h2>On this page</h2>

  108.     </nav></aside></div>

  109. 

  110. 

  111.     <footer><div class="pkgdown-footer-left">

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

  113. </div>

  114. 

  115. <div class="pkgdown-footer-right">

  116.   <p>Site built with <a href="https://pkgdown.r-lib.org/" class="external-link">pkgdown</a> 2.1.0.</p>

  117. </div>

  118. 

  119.     </footer></div>

  120. 

  121. 

  122. 

  123.   <script src="../doc-versions.js"></script></body></html>