EVOLUTION-MANAGER

Edit File: skeleton.html

<!DOCTYPE html>

<html>

<head>

<title>Theming with bslib and thematic</title>

.tabset-dropdown > .nav-tabs > li.active:before {
  content: "";
  font-family: 'Glyphicons Halflings';
  display: inline-block;
  padding: 10px;
  border-right: 1px solid #ddd;
}

.tabset-dropdown > .nav-tabs.nav-tabs-open > li.active:before {
  content: "&#xe258;";
  border: none;
}

.tabset-dropdown > .nav-tabs.nav-tabs-open:before {
  content: "";
  font-family: 'Glyphicons Halflings';
  display: inline-block;
  padding: 10px;
  border-right: 1px solid #ddd;
}

.tabset-dropdown > .nav-tabs > li.active {
  display: block;
}

.tabset-dropdown > .nav-tabs > li > a,
.tabset-dropdown > .nav-tabs > li > a:focus,
.tabset-dropdown > .nav-tabs > li > a:hover {
  border: none;
  display: inline-block;
  border-radius: 4px;
  background-color: transparent;
}

.tabset-dropdown > .nav-tabs.nav-tabs-open > li {
  display: block;
  float: none;
}

.tabset-dropdown > .nav-tabs > li {
  display: none;
}
</style>

<style type="text/css">
.code-folding-btn { margin-bottom: 4px; }
</style>

</head>

<body>

<h1 class="title toc-ignore">Theming with bslib and thematic</h1>

</div>

<div id="r-markdown" class="section level2">
<h2>R Markdown</h2>
<p>This is an R Markdown document themed with <a href="https://rstudio.github.io/bslib/"><code>{bslib}</code> package</a>. <code>{bslib}</code> makes it easy to customize the main colors and fonts of a <code>html_document</code>, <a href="https://flexdashboard-pkg.netlify.app/articles/articles/theme.html"><code>flexdashboard::flex_dashboard</code></a>, <a href="https://shiny.rstudio.com/reference/shiny/latest/fluidPage.html">shiny::fluidPage()</a>, or more generally any website that uses <a href="https://getbootstrap.com/">Bootstrap</a> for styling. The <code>theme</code> parameter in the yaml front-matter of this Rmd document describes a <a href="https://rstudio.github.io/bslib/reference/bs_theme.html"><code>bslib::bs_theme()</code></a> object, which provides access to 100s of <a href="https://rstudio.github.io/bslib/articles/bs4-variables.html">theming options</a> (via its <code>...</code> argument) in addition to the main options demonstrated here (e.g., <code>bg</code>, <code>fg</code>, <code>primary</code>, etc).</p>
<p>This particular example uses <code>{bslib}</code>’s default Bootstrap version (which is Bootstrap 4 at the time of writing). If your document has any of the following, you should probably “pin” the Bootstrap version (e.g., add <code>version: 4</code> to the <code>theme</code> definition):</p>
<ol style="list-style-type: decimal">
<li>A <code>theme</code> which uses the <code>...</code> of <code>bs_theme()</code> (i.e., pretty much any of these <a href="https://rstudio.github.io/bslib/articles/bs4-variables.html">theming options</a> that aren’t a named <code>bs_theme()</code> argument).</li>
<li>Custom HTML or CSS that uses Bootstrap-specific features (e.g., <a href="https://rstudio.github.io/bslib/articles/theming.html#utility-classes-1">utility classes</a>)</li>
</ol>
</div>
<div id="themed-plots" class="section level2 tabset tabset-pills">
<h2 class="tabset tabset-pills">Themed Plots</h2>
<p>When running this document with <a href="https://rstudio.github.io/thematic/"><code>{thematic}</code></a> installed, the <code>thematic::thematic_rmd(font = "auto")</code> effectively translates <code>theme</code> (CSS) settings to new global theming defaults for <code>{ggplot2}</code>, <code>{lattice}</code>, and <code>{base}</code> R graphics:</p>
<div id="ggplot2" class="section level3">
<h3>ggplot2</h3>
<pre class="r"><code>library(ggplot2)

ggplot(mpg, aes(displ, hwy)) +
  geom_point() + geom_smooth()</code></pre>
<pre><code>## `geom_smooth()` using method = &#39;loess&#39; and formula &#39;y ~ x&#39;</code></pre>
<p><img src="skeleton_files/figure-html/unnamed-chunk-1-1.png" width="672" /></p>
</div>
<div id="lattice" class="section level3">
<h3>lattice</h3>
<pre class="r"><code>lattice::show.settings()</code></pre>
<p><img src="skeleton_files/figure-html/unnamed-chunk-2-1.png" width="672" /></p>
</div>
<div id="base" class="section level3">
<h3>base</h3>
<pre class="r"><code>plot(pressure, col = thematic::thematic_get_option(&quot;accent&quot;))</code></pre>
<p><img src="skeleton_files/figure-html/unnamed-chunk-3-1.png" width="672" /></p>
</div>
</div>

</div>

// add bootstrap table styles to pandoc tables
function bootstrapStylePandocTables() {
  $('tr.odd').parent('tbody').parent('table').addClass('table table-condensed');
}
$(document).ready(function () {
  bootstrapStylePandocTables();
});

</script>

$(document).ready(function () {
  $('.tabset-dropdown > .nav-tabs > li').click(function () {
    $(this).parent().toggleClass('nav-tabs-open');
  });
});
</script>

<script>
$(document).ready(function () {
  window.initializeCodeFolding("show" === "show");
});
</script>

<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>

</body>
</html>