From b5bb62b9cab677333c48078fc7d87f9fc2f78977 Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Wed, 10 Feb 2021 17:35:07 -0600
Subject: [PATCH 01/20] Allow gaugeSectors() to updated on redraw (and also add
 bslib integration)

---
 R/gauge.R | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/R/gauge.R b/R/gauge.R
index e778b518..448ceb6e 100644
--- a/R/gauge.R
+++ b/R/gauge.R
@@ -127,6 +127,7 @@ gaugeSectors <- function(success = NULL, warning = NULL, danger = NULL,
     ),
     class = "gaugeSectors"
   )
+<<<<<<< HEAD
 }
 
 resolveAccentColors <- function(colors, theme) {
@@ -152,6 +153,21 @@ getSassAccentColors <- function(theme, accents = accent_colors()) {
   )
 }
 
+=======
+}
+
+resolveSectorColors <- function(sectors, accentMap) {
+  sectors$ranges <- lapply(sectors$ranges, function(x) {
+    if (is_accent_color(x$color)) {
+      x$color <- accentMap[[x$color]]
+    }
+    x$color <- htmltools::parseCssColors(x$color)
+    x
+  })
+  sectors
+}
+
+>>>>>>> 30b38db (Allow gaugeSectors() to updated on redraw (and also add bslib integration))
 
 #' Shiny bindings for gauge
 #'

From f54ee76c4426b66ea388ba6c09a3a00825af5da1 Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Thu, 11 Feb 2021 14:06:21 -0600
Subject: [PATCH 02/20] Make value boxes dynamically themeable

---
 R/gauge.R | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/R/gauge.R b/R/gauge.R
index 448ceb6e..e778b518 100644
--- a/R/gauge.R
+++ b/R/gauge.R
@@ -127,7 +127,6 @@ gaugeSectors <- function(success = NULL, warning = NULL, danger = NULL,
     ),
     class = "gaugeSectors"
   )
-<<<<<<< HEAD
 }
 
 resolveAccentColors <- function(colors, theme) {
@@ -153,21 +152,6 @@ getSassAccentColors <- function(theme, accents = accent_colors()) {
   )
 }
 
-=======
-}
-
-resolveSectorColors <- function(sectors, accentMap) {
-  sectors$ranges <- lapply(sectors$ranges, function(x) {
-    if (is_accent_color(x$color)) {
-      x$color <- accentMap[[x$color]]
-    }
-    x$color <- htmltools::parseCssColors(x$color)
-    x
-  })
-  sectors
-}
-
->>>>>>> 30b38db (Allow gaugeSectors() to updated on redraw (and also add bslib integration))
 
 #' Shiny bindings for gauge
 #'

From 90deed45eb915a4af32550439ce77369532a2cf5 Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Tue, 9 Feb 2021 17:59:03 -0600
Subject: [PATCH 03/20] wip bslib integration

---
 DESCRIPTION                                   |   1 +
 NEWS.md                                       |  21 +
 R/dependencies.R                              |   2 +
 R/flex_dashboard.R                            | 104 ++-
 .../flex_dashboard/resources/default.html     |   8 +-
 .../resources/flexdashboard.scss              | 692 ++++++++++++++++++
 6 files changed, 786 insertions(+), 42 deletions(-)
 create mode 100644 inst/rmarkdown/templates/flex_dashboard/resources/flexdashboard.scss

diff --git a/DESCRIPTION b/DESCRIPTION
index fde27780..419edb6d 100644
--- a/DESCRIPTION
+++ b/DESCRIPTION
@@ -49,3 +49,4 @@ LazyData: TRUE
 License: MIT + file LICENSE
 RoxygenNote: 7.1.1
 Config/testthat/edition: 3
+Remotes: rstudio/rmarkdown
diff --git a/NEWS.md b/NEWS.md
index c4332d63..a935df38 100644
--- a/NEWS.md
+++ b/NEWS.md
@@ -1,6 +1,27 @@
 flexdashboard 0.5.2.9000
 ===========
 
+This release is focuses primarily on integration with the new [`{bslib}` package](https://rstudio.github.io/bslib/index.html). As a result, customizing main colors and fonts of `{flexdashboard}` is now much easier, by providing a custom `bslib::bs_theme()` specification to `flex_dashboard`'s `theme` parameter. 
+
+The yaml below demonstrates how to implement a custom dark mode with custom fonts. By default, providing a custom `{bslib}` `theme` in this way upgrades your app from Bootstrap 3 to 4, but if you run into any issues, you can add `version: 3` to the `theme` to use Bootstrap 3 instead of 4.
+
+````yaml
+---
+output:
+  flexdashboard::flex_dashboard:
+    theme:
+      bg: "#101010"
+      fg: "#FDF7F7"
+      primary: "#ED79F9"
+      base_font: !expr bslib::font_google("Prompt")
+      code_font: !expr bslib::font_google("JetBrains Mono")
+---
+````
+
+TODO: image?
+
+Moreover, you can also now theme dashboards in real-time by adding a `runtime: shiny` to the yaml matter, then calling `bslib::bs_themer()` inside a code chunk.
+
 ### Possibly breaking changes
 
 * The `smart` argument was removed from `flexdashboard::flex_dashboard` since it was removed in rmarkdown 2.2 (relatedly, we now require rmarkdown 2.2 or higher). (#301)
diff --git a/R/dependencies.R b/R/dependencies.R
index a0dea7f4..bf44bf2a 100644
--- a/R/dependencies.R
+++ b/R/dependencies.R
@@ -12,6 +12,8 @@ flexdashboard_dependency <- function(name) {
   system.file("www", name, package = "flexdashboard")
 }
 
+# Might have an issue with jQuery 3?
+# https://github.com/jmosbech/StickyTableHeaders/pull/157
 html_dependency_stickytableheaders <- function() {
   htmlDependency(
     "stickytableheaders",
diff --git a/R/flex_dashboard.R b/R/flex_dashboard.R
index 68840da0..f008910c 100644
--- a/R/flex_dashboard.R
+++ b/R/flex_dashboard.R
@@ -108,6 +108,7 @@ flex_dashboard <- function(fig_width = 6.0,
                            vertical_layout = c("fill", "scroll"),
                            storyboard = FALSE,
                            theme = "default",
+                           navbar_bg = "primary",
                            highlight = "default",
                            mathjax = "default",
                            extra_dependencies = NULL,
@@ -297,54 +298,22 @@ flex_dashboard <- function(fig_width = 6.0,
     add_graphic("logo", logo)
     add_graphic("favicon", favicon)
 
-    # include flexdashboard.css and flexdashboard.js (but not in devel
-    # mode, in that case relative filesystem references to
-    # them are included in the template along with live reload)
+    # Include flexdashboard.js unless we're in devel mode.
+    # In that case, relative filesystem references to
+    # them are included in the template, along with live reload
     if (devel) {
       args <- c(args, pandoc_variable_arg("devel", "1"))
-      dashboardCss <- NULL
-      dashboardScript <- NULL
     } else {
-      if (fill_page) {
-        fillPageCss <- readLines(resource("fillpage.css"))
-      } else {
-        fillPageCss <- NULL
-      }
-
-      theme <- ifelse(identical(theme, "default"), "bootstrap", theme)
-      dashboardCss <- c(
-        '<style type="text/css">',
-        readLines(resource("flexdashboard.css")),
-        readLines(resource(paste0("theme-", theme, ".css"))),
-        fillPageCss,
-        '</style>'
-      )
-
-      dashboardScript <- c(
-        '<script type="text/javascript">',
-        readLines(resource("flexdashboard.js")),
-        '</script>'
-      )
+      dashboardScriptFile <- tempfile(fileext = ".html")
+      dashboardScript <- c('<script type="text/javascript">', readLines(resource("flexdashboard.js")), '</script>')
+      writeLines(dashboardScript, dashboardScriptFile)
+      includes$before_body <- c(includes$before_body, dashboardScriptFile)
     }
 
     # if there is no fig_mobile height and width then pass the default
     if (is.null(fig_mobile))
       fig_mobile <- default_fig_mobile
 
-    # css
-    if (!is.null(dashboardCss)) {
-      dashboardCssFile <- tempfile(fileext = "html")
-      writeLines(dashboardCss, dashboardCssFile)
-      args <- c(args, pandoc_include_args(in_header = dashboardCssFile))
-    }
-
-    # script
-    if (!is.null(dashboardScript)) {
-      dashboardScriptFile <- tempfile(fileext = ".html")
-      writeLines(dashboardScript, dashboardScriptFile)
-      includes$before_body <- c(includes$before_body, dashboardScriptFile)
-    }
-
     # dashboard init script
     dashboardInitScript <- c(
        '<script type="text/javascript">',
@@ -392,6 +361,13 @@ flex_dashboard <- function(fig_width = 6.0,
     for (css_file in css)
       args <- c(args, "--css", pandoc_path_arg(css_file))
 
+    navbar_bg <- resolveAccentColors(navbar_bg, theme)
+    args <- c(args, pandoc_variable_arg("navbar-bg", navbar_bg))
+
+    navbar_contrast <- parseCssColors(getColorContrast(navbar_bg))
+    navbar_type <- if (col2rgb(navbar_contrast)[1,1] < 127.5) "default" else "inverse"
+    args <- c(args, pandoc_variable_arg("navbar-type", navbar_type))
+
     args
   }
 
@@ -420,6 +396,17 @@ flex_dashboard <- function(fig_width = 6.0,
                                       html_dependency_prism()))
   }
 
+  if (fill_page) {
+    extra_dependencies <- append(extra_dependencies, html_dependencies_fillpage())
+  }
+
+  if (is_bs_theme(theme)) {
+    dynamic_flexdb <- bslib::bs_dependency_defer(html_dependencies_flexdb)
+    theme <- bslib::bs_bundle(theme, sass::sass_layer(html_deps = dynamic_flexdb))
+  } else {
+    extra_dependencies <- append(extra_dependencies, html_dependencies_flexdb(theme))
+  }
+
   # return format
   output_format(
     knitr = knitr_options,
@@ -616,6 +603,45 @@ storyboard_dependencies <- function(source = NULL) {
 }
 
 
+html_dependencies_fillpage <- function() {
+  list(htmlDependency(
+    name = "flexdashboard-fillpage",
+    version = packageVersion("flexdashboard"),
+    src = "rmarkdown/templates/flex_dashboard/resources",
+    package = "flexdashboard",
+    stylesheet = "fillpage.css"
+  ))
+}
+
+html_dependencies_flexdb <- function(theme) {
+  name <- "flexdashboard-css"
+  version <- packageVersion("flexdashboard")
+
+  if (is.character(theme)) {
+    dep <- htmlDependency(
+      name = name, version = version,
+      src = "rmarkdown/templates/flex_dashboard/resources",
+      package = "flexdashboard",
+      stylesheet = c(
+        "flexdashboard.css",
+        paste0("theme-", theme, ".css")
+      )
+    )
+    return(list(dep))
+  }
+
+  if (bslib::is_bs_theme(theme)) {
+    dep <- bslib::bs_dependency(
+      sass::sass_file(resource("flexdashboard.scss")),
+      theme = theme, name = name, version = version,
+      cache_key_extra = version
+    )
+    return(list(dep))
+  }
+
+  stop("Didn't recognize a theme object with class: ", class(theme))
+}
+
 # function for resolving resources
 resource <- function(name) {
   system.file("rmarkdown/templates/flex_dashboard/resources", name,
diff --git a/inst/rmarkdown/templates/flex_dashboard/resources/default.html b/inst/rmarkdown/templates/flex_dashboard/resources/default.html
index 062b5fb3..85262f7d 100644
--- a/inst/rmarkdown/templates/flex_dashboard/resources/default.html
+++ b/inst/rmarkdown/templates/flex_dashboard/resources/default.html
@@ -51,8 +51,7 @@
 </head>
 
 <body>
-
-<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+<div class="navbar navbar-$navbar-type$ navbar-fixed-top" role="navigation" style="background-color:$navbar-bg$ !important">
 <div class="container-fluid">
 <div class="navbar-header">
 
@@ -103,7 +102,10 @@
 $$(document).ready(function () {
 
   // add bootstrap table styles to pandoc tables
-  $$('tr.header').parent('thead').parent('table').addClass('table table-condensed');
+  // TODO: should we do this in rmarkdown as well
+  var bs3 = $$.fn.tab.Constructor.VERSION.match(/^3/);
+  var tableClass = bs3 ? 'table table-condensed' : 'table table-sm';
+  $$('tr.header').parent('thead').parent('table').addClass(tableClass);
 
   // initialize mathjax
 $if(mathjax-url)$
diff --git a/inst/rmarkdown/templates/flex_dashboard/resources/flexdashboard.scss b/inst/rmarkdown/templates/flex_dashboard/resources/flexdashboard.scss
new file mode 100644
index 00000000..26a9b475
--- /dev/null
+++ b/inst/rmarkdown/templates/flex_dashboard/resources/flexdashboard.scss
@@ -0,0 +1,692 @@
+// This Sass file wants to be compiled with Bootstrap Sass headers
+
+// Colors
+$body-bg: #fff !default;
+$body-color: $text-color !default; // BS3 compat
+// TODO: combine gray-1 to gray-3 into one var?
+$gray-1: mix($body-bg, $body-color, 84.3%) !default; // #d7d7d7
+$gray-2: mix($body-bg, $body-color, 88.6%) !default; // #e2e2e2
+$gray-3: mix($body-bg, $body-color, 86.7%) !default; // #dddddd
+$gray-4: mix($body-bg, $body-color, 40%) !default; // #666
+$gray-5: mix($body-bg, $body-color, 60%) !default; // #999
+$primary: $brand-primary !default; // BS3 compat
+
+// Fonts
+$font-size-base: 14px !default;
+$font-size-lg:   $font-size-base * 1.25 !default;
+$font-size-sm:   $font-size-base * .875 !default;
+$h1-font-size:   $font-size-base * 2.5 !default;
+$h4-font-size:   $font-size-base * 1.5 !default;
+$font-weight-light: 300 !default;
+
+// Borders
+$border-width: 1px !default;
+$border-color: mix($body-bg, $body-color, 84.3%) !default;
+$border-radius: .25rem !default;
+
+// Mixin shims (for BS3 compat)
+@mixin border-radius-shim($radius) {
+  @if mixin-exists("border-radius") {
+    @include border-radius($radius);
+  } @else {
+    border-radius: $radius;
+  }
+}
+@mixin font-size-shim($size) {
+  @if mixin-exists("font-size") {
+    @include font-size($size);
+  } @else {
+    font-size: $size;
+  }
+}
+
+
+/*
+ Dashboard CSS derives from Keen IO Dashboards
+ (https://github.com/keen/dashboards)
+*/
+
+body {
+  background: mix($body-bg, $body-color, 95%); // #f2f2f2
+  // TODO: what to do about padding-top? Does bslib handle it?
+  padding: 60px 0 0 8px; /* padding-top overridden by theme */
+}
+
+body hr {
+  border-color: $gray-1;
+  margin: 10px 0;
+}
+
+.navbar-inverse .navbar-nav > li > a,
+.navbar .navbar-brand {
+  text-decoration: none;
+}
+
+.navbar-logo {
+  margin-top: 1px;
+}
+
+.navbar-logo img {
+  margin-right: 12px;
+}
+
+.navbar-author {
+  margin-left: 10px;
+  @include font-size-shim($font-size-base * 1.1);
+}
+
+.navbar .dropdown-menu .fa {
+  min-width: 20px;
+}
+
+.navbar .dropdown-menu {
+  min-width: 150px;
+  max-height: 500px;
+  overflow: auto;
+}
+
+.chart-wrapper,
+.nav-tabs-custom,
+.sbframe-commentary
+{
+  background: $body-bg;
+  border: $border-width solid $border-color;
+  @include border-radius-shim($border-radius);
+  margin-bottom: 8px;
+  margin-right: 8px;
+}
+
+.chart-title {
+  border-bottom: $border-width solid $border-color;
+  @include font-size-shim($font-size-base);
+  font-weight: $font-weight-light;
+  padding: 7px 10px 4px;
+  //setting color here isn't great idea if we want this to work with .bg-* utility classes
+  //color: $gray-4;
+}
+
+.chart-wrapper .chart-title:empty {
+  display: none;
+}
+
+.chart-wrapper .chart-stage {
+  overflow: hidden;
+  padding: 5px 10px;
+  position: relative;
+}
+
+.chart-wrapper .chart-notes {
+  background: mix($body-bg, $body-color, 98.5%);
+  border-top: $border-width solid $border-color;
+  color: mix($body-bg, $body-color, 50%);
+  @include font-size-shim($font-size-sm);
+  padding: 8px 10px 5px;
+}
+
+/*
+ CSS for handling flexbox layout
+*/
+
+#dashboard-container {
+  visibility: hidden;
+}
+
+.tab-content>.dashboard-page-wrapper.active {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.dashboard-page-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.dashboard-row-orientation {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.dashboard-row {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+
+.dashboard-row-flex {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+
+.dashboard-column-orientation {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+
+.dashboard-column {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.chart-wrapper-flex {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.chart-stage-flex {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  position: relative;
+}
+
+.chart-shim {
+  position: absolute;
+  left: 8px; top: 8px; right: 8px; bottom: 8px;
+}
+
+.no-padding .chart-shim {
+  left: 0; top: 0; right: 0; bottom: 0;
+}
+
+.flowing-content-shim {
+  overflow: auto;
+  left: 0; top: 0; right: 0; bottom: 0;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.flowing-content-container {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.chart-stage .table-bordered {
+  border: none;
+}
+
+.chart-stage .table-bordered > tbody > tr > th,
+.chart-stage .table-bordered > tfoot > tr > th,
+.chart-stage .table-bordered > tbody > tr > td,
+.chart-stage .table-bordered > tfoot > tr > td {
+  border: none;
+}
+
+.chart-stage .table-bordered > tbody > tr > td {
+  border-top: $border-width solid $border-color;
+}
+
+.chart-stage .table-bordered > thead > tr > th {
+  border: none;
+  border-bottom: ($border-width*2) solid $border-color;
+}
+
+.bootstrap-table table>thead {
+  background-color: $body-bg;
+}
+
+.bootstrap-table table.data,
+.bootstrap-table table.shiny-table {
+  width: inherit !important;
+}
+
+.bootstrap-table table.data>tbody>tr>th,
+.bootstrap-table table.shiny-table>tbody>tr>th {
+  border-top: none;
+  border-bottom: ($border-width*2) solid $border-color;
+  padding: 5px;
+}
+
+.bootstrap-table .data td[align=right] {
+  font-family: inherit;
+}
+
+.chart-wrapper form {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+// TODO: remove?
+.shiny-input-container label {
+  font-weight: normal;
+}
+
+.chart-stage .html-widget {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.chart-stage .html-widget-static-bound {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.chart-stage .shiny-bound-output {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+/* Omit display of empty paragraphs */
+
+.chart-shim>p:empty {
+  display: none;
+}
+
+.chart-stage>p:empty {
+  display: none;
+}
+
+/* Omit display of special knitr options div*/
+
+.chart-stage .knitr-options {
+  display: none;
+}
+
+/* Automatically resizing images */
+
+.image-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+}
+
+.image-container img {
+  opacity: 0;
+  overflow: hidden;
+}
+
+/* STORYBOARD */
+
+.storyboard-nav button {
+  background: transparent;
+  border: 0;
+  opacity: .3;
+  outline: none;
+  padding: 0;
+}
+
+.storyboard-nav button:hover,
+.storyboard-nav button:hover {
+  opacity: .5;
+}
+
+.storyboard-nav button:disabled,
+.storyboard-nav button:disabled {
+  opacity: .1;
+}
+
+.storyboard-nav .sbnext,
+.storyboard-nav .sbprev {
+  float: left;
+  width: 2%;
+  height: 120px;
+  @include font-size-shim($font-size-base * 3.5);
+  color: $body-color;
+}
+
+.storyboard-nav .sbprev {
+  text-align: left;
+  width: 2%;
+}
+
+.storyboard-nav .sbnext {
+  float: right;
+  text-align: right;
+  margin-right: 8px;
+}
+
+.storyboard-nav .sbframelist {
+  margin: 0 auto;
+  width: 94%;
+  height: 120px;
+  overflow: hidden;
+  text-shadow: none;
+  margin-bottom: 8px;
+}
+
+.storyboard-nav .sbframelist ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+.storyboard-nav .sbframelist ul li {
+  float: left;
+  width: 270px;
+  height: 100%;
+  padding: 10px 10px 10px 10px;
+  margin-right: 8px;
+  background: $body-bg;
+  border: $border-width solid $border-color;
+  @include border-radius-shim($border-radius);
+  color: mix($body-bg, $body-color, 25%); // #3a3c47
+  text-align: left;
+  @include font-size-shim($font-size-base);
+  cursor: pointer;
+}
+
+.storyboard-nav .sbframelist ul li:last-child {
+  margin-right: 0px;
+}
+
+.storyboard-nav .sbframelist ul li.active {
+  color: $body-bg;
+  //background: mix($body-bg, $body-color, 72.2%); // #B8B8B8
+  background-color: rgba($primary, 0.7);
+}
+
+.sbframe-commentary {
+  width: 300px;
+  background: mix($body-bg, $body-color, 98.4%); // #fbfbfb
+  @include font-size-shim($font-size-base);
+}
+
+.sbframe-commentary ul {
+  padding-left: 22px;
+}
+
+.sbframe.active {
+  display: flex;
+}
+
+.sbframe:not(.active) {
+  display: none;
+}
+
+/* NAV TABS */
+
+.nav-tabs-custom > .nav-tabs {
+  margin: 0;
+  border-bottom: $border-width solid $border-color;
+  color: $gray-4;
+  @include font-size-shim($font-size-base);
+  font-weight: $font-weight-light;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.nav-tabs-custom > .nav-tabs > li {
+  border-top: ($border-width*3) solid transparent;
+  margin-bottom: -1px;
+  margin-right: 5px;
+}
+.nav-tabs-custom > .nav-tabs > li > a,
+.nav-tabs-custom > .nav-tabs > li > a:active {
+  color: $gray-4;
+  font-weight: $font-weight-light;
+  @include font-size-shim($font-size-base);
+  border-radius: 0;
+  padding: 3px 10px 5px;
+  text-transform: none;
+}
+
+.nav-tabs-custom > .nav-tabs > li:not(.active) > a {
+  border-bottom-color: transparent;
+}
+
+.nav-tabs-custom > .nav-tabs > li > a.text-muted {
+  color: $gray-5;
+}
+.nav-tabs-custom > .nav-tabs > li > a,
+.nav-tabs-custom > .nav-tabs > li > a:hover {
+  background: transparent;
+  margin: 0;
+}
+.nav-tabs-custom > .nav-tabs > li > a:hover {
+  color: $gray-5;
+}
+.nav-tabs-custom > .nav-tabs > li:not(.active) > a:hover,
+.nav-tabs-custom > .nav-tabs > li:not(.active) > a:focus,
+.nav-tabs-custom > .nav-tabs > li:not(.active) > a:active {
+  border-color: transparent;
+}
+.nav-tabs-custom > .nav-tabs > li.active {
+  border-top-color: $primary;
+}
+.nav-tabs-custom > .nav-tabs > li.active > a,
+.nav-tabs-custom > .nav-tabs > li.active:hover > a {
+  background-color: $body-bg;
+  color: $gray-4;
+}
+.nav-tabs-custom > .nav-tabs > li.active > a {
+  border-top-color: transparent;
+  border-left-color: $gray-1;
+  border-right-color: $gray-1;
+}
+.nav-tabs-custom > .nav-tabs > li:first-of-type {
+  margin-left: 0;
+}
+.nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {
+  border-left-color: transparent;
+}
+.nav-tabs-custom > .nav-tabs.pull-right {
+  float: none !important;
+}
+.nav-tabs-custom > .nav-tabs.pull-right > li {
+  float: right;
+}
+.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type {
+  margin-right: 0;
+}
+.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type > a {
+  border-left-width: 1px;
+}
+.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type.active > a {
+  border-left-color: $gray-1;
+  border-right-color: transparent;
+}
+.nav-tabs-custom > .nav-tabs > li.header {
+  line-height: 35px;
+  padding: 0 10px;
+  @include font-size-shim($h4-font-size);
+  color: $gray-4;
+}
+.nav-tabs-custom > .nav-tabs > li.header > .fa,
+.nav-tabs-custom > .nav-tabs > li.header > .glyphicon,
+.nav-tabs-custom > .nav-tabs > li.header > .ion {
+  margin-right: 5px;
+}
+.nav-tabs-custom > .tab-content {
+  background: $body-bg;
+  padding: 0;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.nav-tabs-custom > .tab-content > .chart-wrapper {
+  background: $body-bg;
+  border: none;
+  margin: 0;
+}
+
+
+.nav-tabs-custom > .tab-content > .active {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.nav-tabs-custom .dropdown.open > a:active,
+.nav-tabs-custom .dropdown.open > a:focus {
+  background: transparent;
+  color: $gray-5;
+}
+
+
+@media (max-width: 767px) {
+  .value-box {
+    text-align: center;
+    margin-right: 8px;
+  }
+  .value-box .icon {
+    display: none;
+  }
+}
+
+/* Fixed position sidebar */
+
+.section.sidebar {
+  position: fixed;
+  // TODO: what to do about padding-top?
+  top: 51px; /* overridden by theme */
+  left: 0;
+  bottom: 0;
+  border-right: $border-width solid $border-color;
+  background-color: $body-bg;
+  padding-top: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  visibility: hidden;
+  overflow: auto;
+}
+
+.section.sidebar form p:first-child {
+  margin-top: 10px;
+}
+
+/* Embedded source code */
+
+#flexdashboard-source-code {
+  display: none;
+}
+
+.featherlight-content #flexdashboard-source-code {
+  display: inline-block;
+}
+
+.featherlight-content {
+  width: 80%;
+  max-width: 800px;
+  padding: 0 !important;
+  border-bottom: none !important;
+}
+
+.featherlight:last-of-type {
+  background: rgba($body-color, 0.7);
+}
+
+.featherlight-inner {
+  width: 100%;
+}
+
+.featherlight-content pre {
+  margin: 0;
+  border: 0;
+  background: $body-bg;
+  @include font-size-shim($font-size-sm);
+}
+
+.unselectable {
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: -moz-none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+#flexdashboard-source-code code {
+  -ms-user-select: text;
+  -webkit-user-select: text;
+  -khtml-user-select: text;
+  -moz-user-select: text;
+  -o-user-select: text;
+  user-select: text;
+}
+
+/* DataTables Tweaks */
+
+.dataTables_filter input[type="search"] {
+  -webkit-appearance: searchfield;
+  outline: none;
+}
+
+.dataTables_wrapper.no-footer
+.dataTables_info {
+  padding-top: 0;
+}
+
+
+table.dataTable thead th {
+  border-bottom: $border-width solid $border-color;
+}
+
+.dataTables_wrapper.no-footer .dataTables_scrollBody {
+  border-bottom: $border-width solid $border-color;
+}
+
+/* Mobile phone only CSS */
+
+.desktop-layout div.section.mobile {
+  display: none;
+}
+
+.mobile-layout div.section.no-mobile {
+  display: none;
+}
+
+.mobile-figure {
+  display: none;
+}
+

From cd451fc331ffc72d9c8851a0c466dd88baa5b008 Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Fri, 12 Feb 2021 17:03:18 -0600
Subject: [PATCH 04/20] R CMD check fixes

---
 DESCRIPTION           | 3 ++-
 R/gauge.R             | 7 +++----
 R/package.R           | 1 +
 man/flex_dashboard.Rd | 1 +
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/DESCRIPTION b/DESCRIPTION
index 419edb6d..48681b88 100644
--- a/DESCRIPTION
+++ b/DESCRIPTION
@@ -32,7 +32,8 @@ URL: http://rmarkdown.rstudio.com/flexdashboard
 BugReports: https://github.com/rstudio/flexdashboard/issues
 Encoding: UTF-8
 Depends: R (>= 3.0.2)
-Imports: 
+Imports:
+  grDevices, 
   tools,
   utils, 
   jsonlite, 
diff --git a/R/gauge.R b/R/gauge.R
index e778b518..80ca0120 100644
--- a/R/gauge.R
+++ b/R/gauge.R
@@ -146,10 +146,9 @@ getSassAccentColors <- function(theme, accents = accent_colors()) {
   if ("3" %in% bslib::theme_version(theme)) {
     accents <- paste0("brand-", accents)
   }
-  setNames(
-    bslib::bs_get_variables(theme, accents),
-    sub("^brand-", "", accents)
-  )
+  vals <- bslib::bs_get_variables(theme, accents)
+  names(vals) <- sub("^brand-", "", accents)
+  vals
 }
 
 
diff --git a/R/package.R b/R/package.R
index f5ae43fc..b8ea1e9f 100644
--- a/R/package.R
+++ b/R/package.R
@@ -21,6 +21,7 @@
 #' @importFrom jsonlite toJSON
 #' @importFrom tools file_path_sans_ext
 #' @importFrom utils packageVersion
+#' @importFrom grDevices col2rgb
 #'
 #' @docType package
 #' @name flexdashboard
diff --git a/man/flex_dashboard.Rd b/man/flex_dashboard.Rd
index 51e6005b..6e55be75 100644
--- a/man/flex_dashboard.Rd
+++ b/man/flex_dashboard.Rd
@@ -20,6 +20,7 @@ flex_dashboard(
   vertical_layout = c("fill", "scroll"),
   storyboard = FALSE,
   theme = "default",
+  navbar_bg = "primary",
   highlight = "default",
   mathjax = "default",
   extra_dependencies = NULL,

From da3c50d9ba7105c773530cd1df4f37340074ea59 Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Tue, 16 Feb 2021 10:00:54 -0600
Subject: [PATCH 05/20] document

---
 NAMESPACE             | 1 +
 R/flex_dashboard.R    | 3 +++
 man/flex_dashboard.Rd | 3 +++
 3 files changed, 7 insertions(+)

diff --git a/NAMESPACE b/NAMESPACE
index 6cb184a6..be2f741f 100644
--- a/NAMESPACE
+++ b/NAMESPACE
@@ -12,6 +12,7 @@ import(bslib)
 import(htmltools)
 import(rmarkdown)
 import(sass)
+importFrom(grDevices,col2rgb)
 importFrom(jsonlite,toJSON)
 importFrom(tools,file_path_sans_ext)
 importFrom(utils,packageVersion)
diff --git a/R/flex_dashboard.R b/R/flex_dashboard.R
index f008910c..ac91d1b2 100644
--- a/R/flex_dashboard.R
+++ b/R/flex_dashboard.R
@@ -62,6 +62,9 @@
 #'  "sandstone", "simplex", or "yeti"). The "cosmo" theme is used when "default"
 #'  is specified.
 #'
+#'@param navbar_bg A background color for the navbar. Can be an accent color
+#'  ("primary", "info", "success", "warning", "danger") or a CSS color string.
+#'
 #'@param highlight Syntax highlighting style. Supported styles include
 #'  "default", "tango", "pygments", "kate", "monochrome", "espresso", "zenburn",
 #'  and "haddock". Pass NULL to prevent syntax highlighting.
diff --git a/man/flex_dashboard.Rd b/man/flex_dashboard.Rd
index 6e55be75..32d03acc 100644
--- a/man/flex_dashboard.Rd
+++ b/man/flex_dashboard.Rd
@@ -102,6 +102,9 @@ global \code{storyboard} option.}
 "sandstone", "simplex", or "yeti"). The "cosmo" theme is used when "default"
 is specified.}
 
+\item{navbar_bg}{A background color for the navbar. Can be an accent color
+("primary", "info", "success", "warning", "danger") or a CSS color string.}
+
 \item{highlight}{Syntax highlighting style. Supported styles include
 "default", "tango", "pygments", "kate", "monochrome", "espresso", "zenburn",
 and "haddock". Pass NULL to prevent syntax highlighting.}

From 82ea07d3251291ace6de5e542aacb8dad9c2665b Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Tue, 16 Feb 2021 12:30:26 -0600
Subject: [PATCH 06/20] remove linebreaks in sassValue()

---
 R/gauge.R    | 6 +++---
 R/valuebox.R | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/R/gauge.R b/R/gauge.R
index 80ca0120..a14e227d 100644
--- a/R/gauge.R
+++ b/R/gauge.R
@@ -133,11 +133,11 @@ resolveAccentColors <- function(colors, theme) {
   if (!length(colors)) return(colors)
 
   idx <- vapply(colors, is_accent_color, logical(1))
-  if (is.character(theme)) {
-    colors[idx] <- themeColors[[theme]][colors[idx]]
-  } else if (bslib::is_bs_theme(theme)) {
+  if (bslib::is_bs_theme(theme)) {
     accentMap <- getSassAccentColors(theme, unique(colors[idx]))
     colors[idx] <- accentMap[colors[idx]]
+  } else if (is.character(theme)) {
+    colors[idx] <- themeColors[[theme]][colors[idx]]
   }
   as.character(colors)
 }
diff --git a/R/valuebox.R b/R/valuebox.R
index e5c09021..228c1ef9 100644
--- a/R/valuebox.R
+++ b/R/valuebox.R
@@ -125,7 +125,9 @@ sassValue <- function(expr, defaults = "") {
     list(defaults, sprintf("foo{bar:%s}", expr)),
     options = sass::sass_options(output_style = "compressed")
   )
-  sub("}", "", sub("foo{bar:", "", out, fixed = TRUE), fixed = TRUE)
+  out <- sub("foo{bar:", "", out, fixed = TRUE)
+  out <- sub("}", "", out, fixed = TRUE)
+  gsub("\n", "", out, fixed = TRUE)
 }
 
 

From 706fbef4f88aecb732e7e7bdcab6d70b98b742c0 Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Wed, 17 Feb 2021 18:38:56 -0600
Subject: [PATCH 07/20] valueBox() now correctly considers muted contrast

---
 R/valuebox.R                                               | 7 ++-----
 .../resources/value-box-sass/accent-dynamic.scss           | 2 +-
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/R/valuebox.R b/R/valuebox.R
index 228c1ef9..bcf00c17 100644
--- a/R/valuebox.R
+++ b/R/valuebox.R
@@ -111,11 +111,8 @@ valueBoxDynamicAccentCSS <- function(theme) {
 getColorContrast <- function(color) {
   sass_func <- system.file("sass-utils", "color-contrast.scss", package = "bslib")
   sassValue(
-    sprintf("color-contrast(%s)", color),
-    defaults = list(
-      "color-contrast-dark" = "#1a1a1a",  # TODO: better way to get a muted contrast?
-      sass::sass_file(sass_func)
-    )
+    sprintf("color-contrast(%s, #1a1a1a)", color),
+    defaults = sass::sass_file(sass_func)
   )
 }
 
diff --git a/inst/rmarkdown/templates/flex_dashboard/resources/value-box-sass/accent-dynamic.scss b/inst/rmarkdown/templates/flex_dashboard/resources/value-box-sass/accent-dynamic.scss
index 0bd1fb43..4fbf66a6 100644
--- a/inst/rmarkdown/templates/flex_dashboard/resources/value-box-sass/accent-dynamic.scss
+++ b/inst/rmarkdown/templates/flex_dashboard/resources/value-box-sass/accent-dynamic.scss
@@ -10,7 +10,7 @@ $theme-colors: ("primary": $brand-primary, "info": $brand-info, "warning": $bran
 // for their background and the icon uses the actual primary color
 @each $color, $value in $theme-colors {
   $bg-vb: mix(white, $value, 20%);
-  $fg-vb: color-contrast($bg-vb); // TODO: mute the contrast?
+  $fg-vb: color-contrast($bg-vb, #1a1a1a);
 
   .value-box.value-box-#{$color} {
     background-color: $bg-vb;

From 08d41742f72854c64e595db6cf3ded5a62f68e0f Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Wed, 17 Feb 2021 18:45:46 -0600
Subject: [PATCH 08/20] Roll-back the navbar_bg argument and instead set a
 different default for bslib's new navbar-bg based on primary

Also, make sure the modified theme passes through shiny::bootstrapLib
---
 R/flex_dashboard.R                            | 40 +++++++++++++------
 .../flex_dashboard/resources/default.html     |  3 +-
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/R/flex_dashboard.R b/R/flex_dashboard.R
index ac91d1b2..1174fbf9 100644
--- a/R/flex_dashboard.R
+++ b/R/flex_dashboard.R
@@ -62,9 +62,6 @@
 #'  "sandstone", "simplex", or "yeti"). The "cosmo" theme is used when "default"
 #'  is specified.
 #'
-#'@param navbar_bg A background color for the navbar. Can be an accent color
-#'  ("primary", "info", "success", "warning", "danger") or a CSS color string.
-#'
 #'@param highlight Syntax highlighting style. Supported styles include
 #'  "default", "tango", "pygments", "kate", "monochrome", "espresso", "zenburn",
 #'  and "haddock". Pass NULL to prevent syntax highlighting.
@@ -111,7 +108,6 @@ flex_dashboard <- function(fig_width = 6.0,
                            vertical_layout = c("fill", "scroll"),
                            storyboard = FALSE,
                            theme = "default",
-                           navbar_bg = "primary",
                            highlight = "default",
                            mathjax = "default",
                            extra_dependencies = NULL,
@@ -364,13 +360,6 @@ flex_dashboard <- function(fig_width = 6.0,
     for (css_file in css)
       args <- c(args, "--css", pandoc_path_arg(css_file))
 
-    navbar_bg <- resolveAccentColors(navbar_bg, theme)
-    args <- c(args, pandoc_variable_arg("navbar-bg", navbar_bg))
-
-    navbar_contrast <- parseCssColors(getColorContrast(navbar_bg))
-    navbar_type <- if (col2rgb(navbar_contrast)[1,1] < 127.5) "default" else "inverse"
-    args <- c(args, pandoc_variable_arg("navbar-type", navbar_type))
-
     args
   }
 
@@ -404,8 +393,25 @@ flex_dashboard <- function(fig_width = 6.0,
   }
 
   if (is_bs_theme(theme)) {
-    dynamic_flexdb <- bslib::bs_dependency_defer(html_dependencies_flexdb)
-    theme <- bslib::bs_bundle(theme, sass::sass_layer(html_deps = dynamic_flexdb))
+    # Attach the dynamic CSS dependency to the theme so that the dependency
+    # is restyled if and when `session$setCurrentTheme()` gets called
+    flexdb_css <- bslib::bs_dependency_defer(html_dependencies_flexdb)
+    theme <- bslib::bs_bundle(theme, sass::sass_layer(html_deps = flexdb_css))
+
+    # If no opinions about the navbar (i.e., no bootswatch or $navbar-bg),
+    # then change it's default to $navbar-bg: $primary; (in a way that the
+    # value cascades to the downstream contrasting Sass variables)
+    navbar_bg <- bslib::bs_get_variables(theme, "navbar-bg")
+    if (is.na(navbar_bg)) {
+      theme <- bslib::bs_add_variables(
+        theme, primary = unname(getSassAccentColors(theme, "primary")),
+        "navbar-bg" = "$primary"
+      )
+    }
+
+    # TODO: rmarkdown::html_document() should probably call shiny::bootstrapLib()
+    # when in shiny: runtime to avoid this issue
+    set_current_theme(theme)
   } else {
     extra_dependencies <- append(extra_dependencies, html_dependencies_flexdb(theme))
   }
@@ -434,6 +440,14 @@ flex_dashboard <- function(fig_width = 6.0,
 }
 
 
+set_current_theme <- function(theme) {
+  if (!"shiny" %in% loadedNamespaces()) return(NULL)
+  session <- shiny::getDefaultReactiveDomain()
+  if (is.null(session)) return(NULL)
+  session$setCurrentTheme(theme)
+}
+
+
 mobile_figure_args <- function(mobile_figures) {
   if (length(mobile_figures) > 0) {
     figures <- c()
diff --git a/inst/rmarkdown/templates/flex_dashboard/resources/default.html b/inst/rmarkdown/templates/flex_dashboard/resources/default.html
index 85262f7d..b4948944 100644
--- a/inst/rmarkdown/templates/flex_dashboard/resources/default.html
+++ b/inst/rmarkdown/templates/flex_dashboard/resources/default.html
@@ -51,7 +51,7 @@
 </head>
 
 <body>
-<div class="navbar navbar-$navbar-type$ navbar-fixed-top" role="navigation" style="background-color:$navbar-bg$ !important">
+<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
 <div class="container-fluid">
 <div class="navbar-header">
 
@@ -102,7 +102,6 @@
 $$(document).ready(function () {
 
   // add bootstrap table styles to pandoc tables
-  // TODO: should we do this in rmarkdown as well
   var bs3 = $$.fn.tab.Constructor.VERSION.match(/^3/);
   var tableClass = bs3 ? 'table table-condensed' : 'table table-sm';
   $$('tr.header').parent('thead').parent('table').addClass(tableClass);

From ea75f262f0a72ad00fc65bf80a47487fc76975a2 Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Wed, 17 Feb 2021 18:47:01 -0600
Subject: [PATCH 09/20] Adjust for navbar height in JavaScript rather than CSS

---
 .../flex_dashboard/resources/default.html          | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/inst/rmarkdown/templates/flex_dashboard/resources/default.html b/inst/rmarkdown/templates/flex_dashboard/resources/default.html
index b4948944..cdd3a2e9 100644
--- a/inst/rmarkdown/templates/flex_dashboard/resources/default.html
+++ b/inst/rmarkdown/templates/flex_dashboard/resources/default.html
@@ -99,7 +99,19 @@
 
 <script>
 
-$$(document).ready(function () {
+// Navbar padding adjustments
+function adjustForNavHeight() {
+  var navHeight = $$(".navbar").first().outerHeight();
+  var body = $$("body").first().css("padding-top", (navHeight + 8) + "px");
+  var sidebar = $$(".section.sidebar").first().css("top", navHeight + "px");
+}
+
+$$(document).on("shiny:restyle", function() {
+  setTimeout(adjustForNavHeight, 100);
+});
+
+$$(document).ready(function() {
+  adjustForNavHeight();
 
   // add bootstrap table styles to pandoc tables
   var bs3 = $$.fn.tab.Constructor.VERSION.match(/^3/);

From 41434e9a13cc6adac61d7090b4e8fd8092e1ec93 Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Thu, 18 Feb 2021 16:26:49 -0600
Subject: [PATCH 10/20] Remove setCurrentTheme() hack and instead require
 rmarkdown patch

---
 DESCRIPTION        |  2 +-
 R/bslib.R          |  3 ---
 R/flex_dashboard.R | 16 ++++------------
 tools/updateCSS.R  |  9 +++++++++
 4 files changed, 14 insertions(+), 16 deletions(-)
 create mode 100644 tools/updateCSS.R

diff --git a/DESCRIPTION b/DESCRIPTION
index 48681b88..919e9b1b 100644
--- a/DESCRIPTION
+++ b/DESCRIPTION
@@ -50,4 +50,4 @@ LazyData: TRUE
 License: MIT + file LICENSE
 RoxygenNote: 7.1.1
 Config/testthat/edition: 3
-Remotes: rstudio/rmarkdown
+Remotes: rstudio/rmarkdown#2049
diff --git a/R/bslib.R b/R/bslib.R
index e50ebf59..3da975f3 100644
--- a/R/bslib.R
+++ b/R/bslib.R
@@ -1,8 +1,5 @@
 resolve_theme <- function(theme) {
   if (is.list(theme)) {
-    if (!is_available("rmarkdown", "2.6.6")) {
-      stop("Providing a list to `theme` requires the rmarkdown verion 2.6.6 or higher.", call. = FALSE)
-    }
     return(as_bs_theme(theme))
   }
   if (identical(theme, "default")) {
diff --git a/R/flex_dashboard.R b/R/flex_dashboard.R
index 1174fbf9..268919d9 100644
--- a/R/flex_dashboard.R
+++ b/R/flex_dashboard.R
@@ -393,6 +393,10 @@ flex_dashboard <- function(fig_width = 6.0,
   }
 
   if (is_bs_theme(theme)) {
+    if (!is_available("rmarkdown", "2.6.7")) {
+      stop("Using a {bslib} theme requires rmarkdown v2.6.7 or higher")
+    }
+
     # Attach the dynamic CSS dependency to the theme so that the dependency
     # is restyled if and when `session$setCurrentTheme()` gets called
     flexdb_css <- bslib::bs_dependency_defer(html_dependencies_flexdb)
@@ -408,10 +412,6 @@ flex_dashboard <- function(fig_width = 6.0,
         "navbar-bg" = "$primary"
       )
     }
-
-    # TODO: rmarkdown::html_document() should probably call shiny::bootstrapLib()
-    # when in shiny: runtime to avoid this issue
-    set_current_theme(theme)
   } else {
     extra_dependencies <- append(extra_dependencies, html_dependencies_flexdb(theme))
   }
@@ -440,14 +440,6 @@ flex_dashboard <- function(fig_width = 6.0,
 }
 
 
-set_current_theme <- function(theme) {
-  if (!"shiny" %in% loadedNamespaces()) return(NULL)
-  session <- shiny::getDefaultReactiveDomain()
-  if (is.null(session)) return(NULL)
-  session$setCurrentTheme(theme)
-}
-
-
 mobile_figure_args <- function(mobile_figures) {
   if (length(mobile_figures) > 0) {
     figures <- c()
diff --git a/tools/updateCSS.R b/tools/updateCSS.R
new file mode 100644
index 00000000..71785f49
--- /dev/null
+++ b/tools/updateCSS.R
@@ -0,0 +1,9 @@
+library(sass)
+
+src <- rprojroot::find_package_root_file("inst/rmarkdown/templates/flex_dashboard/resources/flexdashboard.scss")
+
+sass_partial(
+  sass_file(src),
+  bundle = bslib::bs_theme(version = 3, "contrast-color-dark" = ""),
+  output = sub("flexdashboard\\.scss$", "flexdashboard.css", src)
+)

From 64b8634e9b003d0d43414f6aaf7110b8d95f3769 Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Thu, 18 Feb 2021 16:41:35 -0600
Subject: [PATCH 11/20] Update news

---
 NEWS.md | 31 ++++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/NEWS.md b/NEWS.md
index a935df38..d95f1122 100644
--- a/NEWS.md
+++ b/NEWS.md
@@ -1,9 +1,7 @@
 flexdashboard 0.5.2.9000
 ===========
 
-This release is focuses primarily on integration with the new [`{bslib}` package](https://rstudio.github.io/bslib/index.html). As a result, customizing main colors and fonts of `{flexdashboard}` is now much easier, by providing a custom `bslib::bs_theme()` specification to `flex_dashboard`'s `theme` parameter. 
-
-The yaml below demonstrates how to implement a custom dark mode with custom fonts. By default, providing a custom `{bslib}` `theme` in this way upgrades your app from Bootstrap 3 to 4, but if you run into any issues, you can add `version: 3` to the `theme` to use Bootstrap 3 instead of 4.
+This release adds integration with the new [`{bslib}` package](https://rstudio.github.io/bslib/index.html), making the customization of main colors and fonts much easier via `flex_dashboard`'s `theme` parameter. For example, here's a custom dark mode with custom Google Fonts:
 
 ````yaml
 ---
@@ -18,13 +16,36 @@ output:
 ---
 ````
 
-TODO: image?
+Furthermore, all of `{flexdashboard}` now also works sensible with `{bslib}`'s real-time theming widget (`bs_themer()`). To use it, add a `runtime: shiny` to the top of the yaml matter and call `bslib::bs_themer()` in a server context. Also, if your dashboard contains static plots, you can add `thematic::thematic_shiny(font = "auto")` to theme plots in real-time too (just make sure the plots are generated through `renderPlot()`).
+
+````yaml
+---
+output:
+  flexdashboard::flex_dashboard:
+    theme:
+      version: 4
+---
+
+```{r, include = FALSE}
+bslib::bs_themer()
+thematic::thematic_shiny(font = "auto")
+```
+
+## Row
+
+### My plot
+
+```{r}
+renderPlot(plot(1:10))
+```
+````
 
-Moreover, you can also now theme dashboards in real-time by adding a `runtime: shiny` to the yaml matter, then calling `bslib::bs_themer()` inside a code chunk.
+By default, using `{bslib}` with `{` will also upgrade your dashboard from Bootstrap 3 to 4. If you run into any issues with custom widgets rendering not quite right, note that you can add `version: 3` to the `theme` to use Bootstrap 3 instead of 4. To learn more about `{bslib}`[See here](https://github.com/rstudio/bslib#basic-theming-options) to learn more about the theming options that `{bslib}` provides.
 
 ### Possibly breaking changes
 
 * The `smart` argument was removed from `flexdashboard::flex_dashboard` since it was removed in rmarkdown 2.2 (relatedly, we now require rmarkdown 2.2 or higher). (#301)
+* The `window.FlexDashboard.themeColor` JavaScript object property is no longer available. Resolving of theming accent colors should now be done server-side via `{bslib}`'s [dynamic theming tools](https://rstudio.github.io/bslib/articles/theming.html#custom-components-1). (#305) 
 
 ### Improvements & fixes
 

From ac1e20b06ed9d4cd85643f3d1c89e3c59c18e8e7 Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Thu, 18 Feb 2021 16:47:00 -0600
Subject: [PATCH 12/20] Generate pre-compiled flexdashboard.css from scss file

---
 .../flex_dashboard/resources/default.html     |   1 +
 .../resources/flexdashboard.css               | 206 +++++++++---------
 .../resources/flexdashboard.scss              |  13 +-
 tools/updateCSS.R                             |   2 +-
 4 files changed, 117 insertions(+), 105 deletions(-)

diff --git a/inst/rmarkdown/templates/flex_dashboard/resources/default.html b/inst/rmarkdown/templates/flex_dashboard/resources/default.html
index cdd3a2e9..12caa68e 100644
--- a/inst/rmarkdown/templates/flex_dashboard/resources/default.html
+++ b/inst/rmarkdown/templates/flex_dashboard/resources/default.html
@@ -51,6 +51,7 @@
 </head>
 
 <body>
+
 <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
 <div class="container-fluid">
 <div class="navbar-header">
diff --git a/inst/rmarkdown/templates/flex_dashboard/resources/flexdashboard.css b/inst/rmarkdown/templates/flex_dashboard/resources/flexdashboard.css
index 4ee2a900..eeb73538 100644
--- a/inst/rmarkdown/templates/flex_dashboard/resources/flexdashboard.css
+++ b/inst/rmarkdown/templates/flex_dashboard/resources/flexdashboard.css
@@ -1,16 +1,15 @@
-
 /*
- Dashboard CSS from Keen IO Dashboards
+ Dashboard CSS derives from Keen IO Dashboards
  (https://github.com/keen/dashboards)
 */
-
 body {
-  background: #f2f2f2;
-  padding: 60px 0 0 8px; /* padding-top overridden by theme */
+  background: #f4f4f4;
+  padding: 60px 0 0 8px;
+  /* padding-top overridden by theme */
 }
 
 body hr {
-  border-color: #d7d7d7;
+  border-color: #dcdddd;
   margin: 10px 0;
 }
 
@@ -29,7 +28,7 @@ body hr {
 
 .navbar-author {
   margin-left: 10px;
-  font-size: 15px;
+  font-size: 1.1rem;
 }
 
 .navbar .dropdown-menu .fa {
@@ -44,19 +43,17 @@ body hr {
 
 .chart-wrapper,
 .nav-tabs-custom,
-.sbframe-commentary
-{
+.sbframe-commentary {
   background: #fff;
-  border: 1px solid #e2e2e2;
-  border-radius: 3px;
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
   margin-bottom: 8px;
   margin-right: 8px;
 }
 
 .chart-title {
-  border-bottom: 1px solid #d7d7d7;
-  color: #666;
-  font-size: 14px;
+  border-bottom: 1px solid #dee2e6;
+  font-size: 1rem;
   font-weight: 300;
   padding: 7px 10px 4px;
 }
@@ -72,22 +69,21 @@ body hr {
 }
 
 .chart-wrapper .chart-notes {
-  background: #fbfbfb;
-  border-top: 1px solid #e2e2e2;
-  color: #808080;
-  font-size: 12px;
+  background: #fcfcfc;
+  border-top: 1px solid #dee2e6;
+  color: #909294;
+  font-size: 0.875rem;
   padding: 8px 10px 5px;
 }
 
 /*
  CSS for handling flexbox layout
 */
-
 #dashboard-container {
   visibility: hidden;
 }
 
-.tab-content>.dashboard-page-wrapper.active {
+.tab-content > .dashboard-page-wrapper.active {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -102,8 +98,8 @@ body hr {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
 }
 
 .dashboard-row-orientation {
@@ -114,8 +110,8 @@ body hr {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
 }
 
 .dashboard-row {
@@ -126,15 +122,15 @@ body hr {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -webkit-flex-direction: row;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 
 .dashboard-row-flex {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .dashboard-column-orientation {
@@ -145,15 +141,15 @@ body hr {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -webkit-flex-direction: row;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 
 .dashboard-column {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  -ms-flex: 1;
+  flex: 1;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -161,15 +157,15 @@ body hr {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
 }
 
 .chart-wrapper-flex {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  -ms-flex: 1;
+  flex: 1;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -177,30 +173,39 @@ body hr {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
 }
 
 .chart-stage-flex {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  -ms-flex: 1;
+  flex: 1;
   position: relative;
 }
 
 .chart-shim {
   position: absolute;
-  left: 8px; top: 8px; right: 8px; bottom: 8px;
+  left: 8px;
+  top: 8px;
+  right: 8px;
+  bottom: 8px;
 }
 
 .no-padding .chart-shim {
-  left: 0; top: 0; right: 0; bottom: 0;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
 }
 
 .flowing-content-shim {
   overflow: auto;
-  left: 0; top: 0; right: 0; bottom: 0;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
   padding-left: 8px;
   padding-right: 8px;
 }
@@ -222,15 +227,15 @@ body hr {
 }
 
 .chart-stage .table-bordered > tbody > tr > td {
-  border-top: 1px solid #dddddd;
+  border-top: 1px solid #dee2e6;
 }
 
 .chart-stage .table-bordered > thead > tr > th {
   border: none;
-  border-bottom: 2px solid #dddddd;
+  border-bottom: 2px solid #dee2e6;
 }
 
-.bootstrap-table table>thead {
+.bootstrap-table table > thead {
   background-color: #fff;
 }
 
@@ -239,10 +244,10 @@ body hr {
   width: inherit !important;
 }
 
-.bootstrap-table table.data>tbody>tr>th,
-.bootstrap-table table.shiny-table>tbody>tr>th {
+.bootstrap-table table.data > tbody > tr > th,
+.bootstrap-table table.shiny-table > tbody > tr > th {
   border-top: none;
-  border-bottom: 2px solid #dddddd;
+  border-bottom: 2px solid #dee2e6;
   padding: 5px;
 }
 
@@ -275,23 +280,20 @@ body hr {
 }
 
 /* Omit display of empty paragraphs */
-
-.chart-shim>p:empty {
+.chart-shim > p:empty {
   display: none;
 }
 
-.chart-stage>p:empty {
+.chart-stage > p:empty {
   display: none;
 }
 
 /* Omit display of special knitr options div*/
-
 .chart-stage .knitr-options {
   display: none;
 }
 
 /* Automatically resizing images */
-
 .image-container {
   position: absolute;
   top: 0;
@@ -307,7 +309,6 @@ body hr {
 }
 
 /* STORYBOARD */
-
 .storyboard-nav button {
   background: transparent;
   border: 0;
@@ -331,7 +332,8 @@ body hr {
   float: left;
   width: 2%;
   height: 120px;
-  font-size: 50px;
+  font-size: 3.5rem;
+  color: #212529;
 }
 
 .storyboard-nav .sbprev {
@@ -368,11 +370,11 @@ body hr {
   padding: 10px 10px 10px 10px;
   margin-right: 8px;
   background: #fff;
-  border: 1px solid #e2e2e2;
-  border-radius: 3px;
-  color: #3a3c47;
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  color: #595c5f;
   text-align: left;
-  font-size: 14px;
+  font-size: 1rem;
   cursor: pointer;
 }
 
@@ -382,13 +384,13 @@ body hr {
 
 .storyboard-nav .sbframelist ul li.active {
   color: #fff;
-  background: #B8B8B8;
+  background-color: rgba(0, 123, 255, 0.7);
 }
 
 .sbframe-commentary {
   width: 300px;
-  background: #fbfbfb;
-  font-size: 14px;
+  background: #fbfcfc;
+  font-size: 1rem;
 }
 
 .sbframe-commentary ul {
@@ -404,26 +406,27 @@ body hr {
 }
 
 /* NAV TABS */
-
 .nav-tabs-custom > .nav-tabs {
   margin: 0;
-  border-bottom: 1px solid #d7d7d7;
-  color: #666;
-  font-size: 14px;
+  border-bottom: 1px solid #dee2e6;
+  color: #7a7c7f;
+  font-size: 1rem;
   font-weight: 300;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+
 .nav-tabs-custom > .nav-tabs > li {
   border-top: 3px solid transparent;
   margin-bottom: -1px;
   margin-right: 5px;
 }
+
 .nav-tabs-custom > .nav-tabs > li > a,
 .nav-tabs-custom > .nav-tabs > li > a:active {
-  color: #666;
+  color: #7a7c7f;
   font-weight: 300;
-  font-size: 14px;
+  font-size: 1rem;
   border-radius: 0;
   padding: 3px 10px 5px;
   text-transform: none;
@@ -434,67 +437,83 @@ body hr {
 }
 
 .nav-tabs-custom > .nav-tabs > li > a.text-muted {
-  color: #999;
+  color: #a6a8a9;
 }
+
 .nav-tabs-custom > .nav-tabs > li > a,
 .nav-tabs-custom > .nav-tabs > li > a:hover {
   background: transparent;
   margin: 0;
 }
+
 .nav-tabs-custom > .nav-tabs > li > a:hover {
-  color: #999;
+  color: #a6a8a9;
 }
+
 .nav-tabs-custom > .nav-tabs > li:not(.active) > a:hover,
 .nav-tabs-custom > .nav-tabs > li:not(.active) > a:focus,
 .nav-tabs-custom > .nav-tabs > li:not(.active) > a:active {
   border-color: transparent;
 }
+
 .nav-tabs-custom > .nav-tabs > li.active {
-  border-top-color: #3c8dbc;
+  border-top-color: #007bff;
 }
+
 .nav-tabs-custom > .nav-tabs > li.active > a,
 .nav-tabs-custom > .nav-tabs > li.active:hover > a {
   background-color: #fff;
-  color: #666;
+  color: #7a7c7f;
 }
+
 .nav-tabs-custom > .nav-tabs > li.active > a {
   border-top-color: transparent;
-  border-left-color: #d7d7d7;
-  border-right-color: #d7d7d7;
+  border-left-color: #dcdddd;
+  border-right-color: #dcdddd;
 }
+
 .nav-tabs-custom > .nav-tabs > li:first-of-type {
   margin-left: 0;
 }
-.nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {
+
+.nav-tabs-custom > .nav-tabs > li.active:first-of-type > a {
   border-left-color: transparent;
 }
+
 .nav-tabs-custom > .nav-tabs.pull-right {
   float: none !important;
 }
+
 .nav-tabs-custom > .nav-tabs.pull-right > li {
   float: right;
 }
+
 .nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type {
   margin-right: 0;
 }
+
 .nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type > a {
   border-left-width: 1px;
 }
-.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type.active > a {
-  border-left-color: #d7d7d7;
+
+.nav-tabs-custom > .nav-tabs.pull-right > li.active:first-of-type > a {
+  border-left-color: #dcdddd;
   border-right-color: transparent;
 }
+
 .nav-tabs-custom > .nav-tabs > li.header {
   line-height: 35px;
   padding: 0 10px;
-  font-size: 20px;
-  color: #666;
+  font-size: 1.5rem;
+  color: #7a7c7f;
 }
+
 .nav-tabs-custom > .nav-tabs > li.header > .fa,
 .nav-tabs-custom > .nav-tabs > li.header > .glyphicon,
 .nav-tabs-custom > .nav-tabs > li.header > .ion {
   margin-right: 5px;
 }
+
 .nav-tabs-custom > .tab-content {
   background: #fff;
   padding: 0;
@@ -512,7 +531,6 @@ body hr {
   margin: 0;
 }
 
-
 .nav-tabs-custom > .tab-content > .active {
   display: -webkit-box;
   display: -webkit-flex;
@@ -523,10 +541,9 @@ body hr {
 .nav-tabs-custom .dropdown.open > a:active,
 .nav-tabs-custom .dropdown.open > a:focus {
   background: transparent;
-  color: #999;
+  color: #a6a8a9;
 }
 
-
 @media (max-width: 767px) {
   .value-box {
     text-align: center;
@@ -538,14 +555,14 @@ body hr {
 }
 
 /* Fixed position sidebar */
-
 .section.sidebar {
   position: fixed;
-  top: 51px; /* overridden by theme */
+  top: 51px;
+  /* overridden by theme */
   left: 0;
   bottom: 0;
-  border-right: 1px solid #e2e2e2;
-  background-color: white; /* overridden by theme */
+  border-right: 1px solid #dee2e6;
+  background-color: #fff;
   padding-top: 10px;
   padding-left: 10px;
   padding-right: 10px;
@@ -558,7 +575,6 @@ body hr {
 }
 
 /* Embedded source code */
-
 #flexdashboard-source-code {
   display: none;
 }
@@ -575,7 +591,7 @@ body hr {
 }
 
 .featherlight:last-of-type {
-  background: rgba(0, 0, 0, 0.7);
+  background: rgba(33, 37, 41, 0.7);
 }
 
 .featherlight-inner {
@@ -586,7 +602,7 @@ body hr {
   margin: 0;
   border: 0;
   background: #fff;
-  font-size: 12px;
+  font-size: 0.875rem;
 }
 
 .unselectable {
@@ -608,7 +624,6 @@ body hr {
 }
 
 /* DataTables Tweaks */
-
 .dataTables_filter input[type="search"] {
   -webkit-appearance: searchfield;
   outline: none;
@@ -619,17 +634,15 @@ body hr {
   padding-top: 0;
 }
 
-
 table.dataTable thead th {
-  border-bottom: 1px solid #d7d7d7;
+  border-bottom: 1px solid #dee2e6;
 }
 
 .dataTables_wrapper.no-footer .dataTables_scrollBody {
-  border-bottom: 1px solid #d7d7d7;
+  border-bottom: 1px solid #dee2e6;
 }
 
 /* Mobile phone only CSS */
-
 .desktop-layout div.section.mobile {
   display: none;
 }
@@ -641,6 +654,3 @@ table.dataTable thead th {
 .mobile-figure {
   display: none;
 }
-
-
-
diff --git a/inst/rmarkdown/templates/flex_dashboard/resources/flexdashboard.scss b/inst/rmarkdown/templates/flex_dashboard/resources/flexdashboard.scss
index 26a9b475..f8ae0f2e 100644
--- a/inst/rmarkdown/templates/flex_dashboard/resources/flexdashboard.scss
+++ b/inst/rmarkdown/templates/flex_dashboard/resources/flexdashboard.scss
@@ -24,6 +24,10 @@ $border-width: 1px !default;
 $border-color: mix($body-bg, $body-color, 84.3%) !default;
 $border-radius: .25rem !default;
 
+// Sidebar
+$sidebar-bg: rgba($primary, 0.1) !default;
+
+
 // Mixin shims (for BS3 compat)
 @mixin border-radius-shim($radius) {
   @if mixin-exists("border-radius") {
@@ -48,8 +52,7 @@ $border-radius: .25rem !default;
 
 body {
   background: mix($body-bg, $body-color, 95%); // #f2f2f2
-  // TODO: what to do about padding-top? Does bslib handle it?
-  padding: 60px 0 0 8px; /* padding-top overridden by theme */
+  padding: 60px 0 0 8px; /* padding-top overridden by output template */
 }
 
 body hr {
@@ -299,7 +302,6 @@ body hr {
   padding-right: 5px;
 }
 
-// TODO: remove?
 .shiny-input-container label {
   font-weight: normal;
 }
@@ -588,12 +590,11 @@ body hr {
 
 .section.sidebar {
   position: fixed;
-  // TODO: what to do about padding-top?
-  top: 51px; /* overridden by theme */
+  top: 51px; /* overridden by output template */
   left: 0;
   bottom: 0;
   border-right: $border-width solid $border-color;
-  background-color: $body-bg;
+  background-color: $sidebar-bg;
   padding-top: 10px;
   padding-left: 10px;
   padding-right: 10px;
diff --git a/tools/updateCSS.R b/tools/updateCSS.R
index 71785f49..37dfaf06 100644
--- a/tools/updateCSS.R
+++ b/tools/updateCSS.R
@@ -4,6 +4,6 @@ src <- rprojroot::find_package_root_file("inst/rmarkdown/templates/flex_dashboar
 
 sass_partial(
   sass_file(src),
-  bundle = bslib::bs_theme(version = 3, "contrast-color-dark" = ""),
+  bundle = bslib::bs_theme(version = 3),
   output = sub("flexdashboard\\.scss$", "flexdashboard.css", src)
 )

From 63e41465c32b3c2ebe0d7dfca17ef6249e06203d Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Thu, 18 Feb 2021 16:55:38 -0600
Subject: [PATCH 13/20] Cleanup

---
 R/flex_dashboard.R | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/R/flex_dashboard.R b/R/flex_dashboard.R
index 268919d9..e02c46b2 100644
--- a/R/flex_dashboard.R
+++ b/R/flex_dashboard.R
@@ -402,13 +402,12 @@ flex_dashboard <- function(fig_width = 6.0,
     flexdb_css <- bslib::bs_dependency_defer(html_dependencies_flexdb)
     theme <- bslib::bs_bundle(theme, sass::sass_layer(html_deps = flexdb_css))
 
-    # If no opinions about the navbar (i.e., no bootswatch or $navbar-bg),
-    # then change it's default to $navbar-bg: $primary; (in a way that the
-    # value cascades to the downstream contrasting Sass variables)
+    # If $navbar-bg wasn't specified by user, default it to $primary
+    # (instead of $dark, since the template has .navbar-inverse)
     navbar_bg <- bslib::bs_get_variables(theme, "navbar-bg")
     if (is.na(navbar_bg)) {
       theme <- bslib::bs_add_variables(
-        theme, primary = unname(getSassAccentColors(theme, "primary")),
+        theme, primary = getSassAccentColors(theme, "primary"),
         "navbar-bg" = "$primary"
       )
     }

From 410f52619878bc9d86addf73fbbac442d2133013 Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Fri, 19 Feb 2021 10:55:18 -0600
Subject: [PATCH 14/20] update rmarkdown version

---
 R/flex_dashboard.R | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/R/flex_dashboard.R b/R/flex_dashboard.R
index e02c46b2..f6469222 100644
--- a/R/flex_dashboard.R
+++ b/R/flex_dashboard.R
@@ -393,8 +393,8 @@ flex_dashboard <- function(fig_width = 6.0,
   }
 
   if (is_bs_theme(theme)) {
-    if (!is_available("rmarkdown", "2.6.7")) {
-      stop("Using a {bslib} theme requires rmarkdown v2.6.7 or higher")
+    if (!is_available("rmarkdown", "2.7.1")) {
+      stop("Using a {bslib} theme requires rmarkdown v2.7.1 or higher")
     }
 
     # Attach the dynamic CSS dependency to the theme so that the dependency

From a8c2098d9e95d0e0fce18cbc605a1a823d9076d2 Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Fri, 19 Feb 2021 11:02:54 -0600
Subject: [PATCH 15/20] also require dev version of bslib since that's needed
 for navbar-bg

---
 DESCRIPTION | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/DESCRIPTION b/DESCRIPTION
index 919e9b1b..42c7da31 100644
--- a/DESCRIPTION
+++ b/DESCRIPTION
@@ -44,10 +44,12 @@ Imports:
   shiny (>= 0.13), 
   scales,
   sass, 
-  bslib
+  bslib (>= 0.2.4.9002)
 Suggests: testthat
 LazyData: TRUE
 License: MIT + file LICENSE
 RoxygenNote: 7.1.1
 Config/testthat/edition: 3
-Remotes: rstudio/rmarkdown#2049
+Remotes: 
+  rstudio/bslib,
+  rstudio/rmarkdown#2049

From 6ea6b755dfbac9b4c478aa645a3d80b31bb27c59 Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Fri, 19 Feb 2021 11:50:00 -0600
Subject: [PATCH 16/20] Add a proper waiting mechanism to get the timing right
 for the navbar adjustment

---
 .../flex_dashboard/resources/default.html     | 37 +++++++++++++++++--
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/inst/rmarkdown/templates/flex_dashboard/resources/default.html b/inst/rmarkdown/templates/flex_dashboard/resources/default.html
index 12caa68e..56168cc3 100644
--- a/inst/rmarkdown/templates/flex_dashboard/resources/default.html
+++ b/inst/rmarkdown/templates/flex_dashboard/resources/default.html
@@ -100,19 +100,50 @@
 
 <script>
 
+// https://davidwalsh.name/javascript-debounce-function
+
+// Returns a function, that, as long as it continues to be invoked, will not
+// be triggered. The function will be called after it stops being called for
+// N milliseconds. If `immediate` is passed, trigger the function on the
+// leading edge, instead of the trailing.
+function debounce(func, wait, immediate) {
+	var timeout;
+	return function() {
+		var context = this, args = arguments;
+		var later = function() {
+			timeout = null;
+			if (!immediate) func.apply(context, args);
+		};
+		var callNow = immediate && !timeout;
+		clearTimeout(timeout);
+		timeout = setTimeout(later, wait);
+		if (callNow) func.apply(context, args);
+	};
+};
+
 // Navbar padding adjustments
-function adjustForNavHeight() {
+function addNavbarPadding() {
   var navHeight = $$(".navbar").first().outerHeight();
   var body = $$("body").first().css("padding-top", (navHeight + 8) + "px");
   var sidebar = $$(".section.sidebar").first().css("top", navHeight + "px");
 }
 
 $$(document).on("shiny:restyle", function() {
-  setTimeout(adjustForNavHeight, 100);
+  setTimeout(addNavbarPadding, 200);
 });
 
 $$(document).ready(function() {
-  adjustForNavHeight();
+  // Wait until the navbar exists (for runtime: shiny) before scheduling
+  // the addition of the navbar padding
+  function waitForNavbar(func) {
+    var navbarExists = $$(".navbar").length > 0;
+    if (navbarExists) {
+      setTimeout(func, 200);
+      return;
+    }
+    setTimeout(waitForNavbar, 200);
+  }
+  waitForNavbar(addNavbarPadding);
 
   // add bootstrap table styles to pandoc tables
   var bs3 = $$.fn.tab.Constructor.VERSION.match(/^3/);

From a77977629f51fc1e5e69fbf2aed821f34291d7a5 Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Fri, 19 Feb 2021 13:17:09 -0600
Subject: [PATCH 17/20] No need for debounce()

---
 .../flex_dashboard/resources/default.html     | 21 -------------------
 1 file changed, 21 deletions(-)

diff --git a/inst/rmarkdown/templates/flex_dashboard/resources/default.html b/inst/rmarkdown/templates/flex_dashboard/resources/default.html
index 56168cc3..d8bde2c3 100644
--- a/inst/rmarkdown/templates/flex_dashboard/resources/default.html
+++ b/inst/rmarkdown/templates/flex_dashboard/resources/default.html
@@ -100,27 +100,6 @@
 
 <script>
 
-// https://davidwalsh.name/javascript-debounce-function
-
-// Returns a function, that, as long as it continues to be invoked, will not
-// be triggered. The function will be called after it stops being called for
-// N milliseconds. If `immediate` is passed, trigger the function on the
-// leading edge, instead of the trailing.
-function debounce(func, wait, immediate) {
-	var timeout;
-	return function() {
-		var context = this, args = arguments;
-		var later = function() {
-			timeout = null;
-			if (!immediate) func.apply(context, args);
-		};
-		var callNow = immediate && !timeout;
-		clearTimeout(timeout);
-		timeout = setTimeout(later, wait);
-		if (callNow) func.apply(context, args);
-	};
-};
-
 // Navbar padding adjustments
 function addNavbarPadding() {
   var navHeight = $$(".navbar").first().outerHeight();

From 29550c66443aad8ef54c661c2a713054c8e7d31e Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Fri, 19 Feb 2021 16:02:57 -0600
Subject: [PATCH 18/20] Fix news typo

---
 NEWS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/NEWS.md b/NEWS.md
index d95f1122..41b23f4d 100644
--- a/NEWS.md
+++ b/NEWS.md
@@ -40,7 +40,7 @@ renderPlot(plot(1:10))
 ```
 ````
 
-By default, using `{bslib}` with `{` will also upgrade your dashboard from Bootstrap 3 to 4. If you run into any issues with custom widgets rendering not quite right, note that you can add `version: 3` to the `theme` to use Bootstrap 3 instead of 4. To learn more about `{bslib}`[See here](https://github.com/rstudio/bslib#basic-theming-options) to learn more about the theming options that `{bslib}` provides.
+By default, using this `{bslib}` integration will also upgrade your dashboard from Bootstrap 3 to 4. If you run into any issues with custom widgets rendering not quite right, note that you can add `version: 3` to the `theme` in order to use Bootstrap 3 instead of 4. To learn more about `{bslib}`[See here](https://github.com/rstudio/bslib#basic-theming-options) to learn more about the theming options that `{bslib}` provides.
 
 ### Possibly breaking changes
 

From 2751516a779bfd2ea9a71302d4ed58d651e9bb1a Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Fri, 19 Feb 2021 17:01:58 -0600
Subject: [PATCH 19/20] Better timing of dynamic navbar height adjustments

---
 R/flex_dashboard.R                            | 12 ++++++++
 .../flex_dashboard/resources/default.html     | 28 +------------------
 2 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/R/flex_dashboard.R b/R/flex_dashboard.R
index f6469222..3b894e28 100644
--- a/R/flex_dashboard.R
+++ b/R/flex_dashboard.R
@@ -327,6 +327,18 @@ flex_dashboard <- function(fig_width = 6.0,
        paste0('    defaultFigHeightMobile: ', figSizePixels(fig_mobile[[2]]), ','),
        paste0('    resize_reload: ', ifelse(resize_reload,'true','false')),
        '  });',
+       '  var navbar = $(".navbar").first();',
+       '  var body = $("body").first();',
+       '  var sidebar = $(".section.sidebar").first();',
+       '  function addNavbarPadding() {',
+       '    var navHeight = navbar.outerHeight();',
+       '    body.css("padding-top", (navHeight + 8) + "px");',
+       '    sidebar.css("top", navHeight + "px");',
+       '  }',
+       '  setTimeout(addNavbarPadding, 50);',
+       '  $(document).on("shiny:idle", function() {',
+       '    setTimeout(addNavbarPadding, 50);',
+       '  });',
        '});',
        '</script>'
     )
diff --git a/inst/rmarkdown/templates/flex_dashboard/resources/default.html b/inst/rmarkdown/templates/flex_dashboard/resources/default.html
index d8bde2c3..6e2f47e9 100644
--- a/inst/rmarkdown/templates/flex_dashboard/resources/default.html
+++ b/inst/rmarkdown/templates/flex_dashboard/resources/default.html
@@ -99,35 +99,9 @@
 </div>
 
 <script>
-
-// Navbar padding adjustments
-function addNavbarPadding() {
-  var navHeight = $$(".navbar").first().outerHeight();
-  var body = $$("body").first().css("padding-top", (navHeight + 8) + "px");
-  var sidebar = $$(".section.sidebar").first().css("top", navHeight + "px");
-}
-
-$$(document).on("shiny:restyle", function() {
-  setTimeout(addNavbarPadding, 200);
-});
-
 $$(document).ready(function() {
-  // Wait until the navbar exists (for runtime: shiny) before scheduling
-  // the addition of the navbar padding
-  function waitForNavbar(func) {
-    var navbarExists = $$(".navbar").length > 0;
-    if (navbarExists) {
-      setTimeout(func, 200);
-      return;
-    }
-    setTimeout(waitForNavbar, 200);
-  }
-  waitForNavbar(addNavbarPadding);
-
   // add bootstrap table styles to pandoc tables
-  var bs3 = $$.fn.tab.Constructor.VERSION.match(/^3/);
-  var tableClass = bs3 ? 'table table-condensed' : 'table table-sm';
-  $$('tr.header').parent('thead').parent('table').addClass(tableClass);
+  $$('tr.header').parent('thead').parent('table').addClass('table table-condensed table-sm');
 
   // initialize mathjax
 $if(mathjax-url)$

From a733d551a6ede7f242d38ff225d2e1f44bacb1c1 Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Fri, 19 Feb 2021 17:09:55 -0600
Subject: [PATCH 20/20] roxygenize

---
 man/flex_dashboard.Rd | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/man/flex_dashboard.Rd b/man/flex_dashboard.Rd
index 32d03acc..51e6005b 100644
--- a/man/flex_dashboard.Rd
+++ b/man/flex_dashboard.Rd
@@ -20,7 +20,6 @@ flex_dashboard(
   vertical_layout = c("fill", "scroll"),
   storyboard = FALSE,
   theme = "default",
-  navbar_bg = "primary",
   highlight = "default",
   mathjax = "default",
   extra_dependencies = NULL,
@@ -102,9 +101,6 @@ global \code{storyboard} option.}
 "sandstone", "simplex", or "yeti"). The "cosmo" theme is used when "default"
 is specified.}
 
-\item{navbar_bg}{A background color for the navbar. Can be an accent color
-("primary", "info", "success", "warning", "danger") or a CSS color string.}
-
 \item{highlight}{Syntax highlighting style. Supported styles include
 "default", "tango", "pygments", "kate", "monochrome", "espresso", "zenburn",
 and "haddock". Pass NULL to prevent syntax highlighting.}