Update navbar styling to use data-bs-theme attribute

R/navbar.R

@@ -21,10 +21,10 @@ navbar_style <- function(navbar = list(), theme = "_default", bs_version = 3) {
     list(type = navbar$type %||% "default")
   } else {
     # bg is usually light, dark, or primary, but can use any .bg-*
-    bg <- navbar$bg %||% purrr::pluck(bootswatch_bg, theme, .default = "light")
+    bg <- navbar$bg %||% bootswatch_bg[[theme]] %||% "light"
     type <- navbar$type %||% if (bg == "light") "light" else "dark"
 
-    list(bg = bg, type = type)
+    list(bg = bg, is_dark = type == "dark")
   }
 }
 
@@ -229,7 +229,7 @@ pkg_navbar_vignettes <- function(name = character(),
 
 # Scraped from bootswatch preivews, see code in
 # <https://github.com/r-lib/pkgdown/issues/1758>
-bootswatch_bg <- c(
+bootswatch_bg <- list(
   "_default" = "light",
   cerulean = "primary",
   cosmo = "primary",

inst/BS5/assets/pkgdown.scss

@@ -20,11 +20,16 @@
 
 /* navbar =================================================================== */
 
-// boostrap doesn't style active/hovered nav making it hard to see where
-// you are and where you're going, so we add our own styling
-.navbar-nav .nav-item > .nav-link {
+// make both the active nav and the hovered nav more clear by mixing the
+// background colour with the body and primary colours respectively 
+.navbar-nav .nav-item > a {
   @include border-radius($border-radius);
-  padding: 0.5rem;
+}
+.nav-item.active > a       { background: mix($body-bg, $body-color, 90%); }
+.nav-item        > a:hover { background: mix($body-bg, $primary, 90%); }
+[data-bs-theme="dark"] {
+  .nav-item.active > a       { background: mix($body-bg-dark, $body-color-dark, 90%); }
+  .nav-item        > a:hover { background: mix($body-bg-dark, $primary, 90%); }
 }
 
 // Align baselines of package name, version, and nav items
@@ -33,30 +38,8 @@
   -webkit-align-items: baseline;
 }
 
-.navbar-light .navbar-nav .active > .nav-link {
-  background: $gray-200;
-  color:      $body-color;
-}
-.navbar-dark .navbar-nav .active > .nav-link {
-  background: $gray-800;
-  color:      $body-bg;
-}
-
-.navbar-dark .navbar-nav .nav-item > .nav-link:hover,
-.navbar-light .navbar-nav .nav-item > .nav-link:hover {
-  background: change-color($primary, $alpha: 0.1);
-}
-
-.navbar-dark {
-  input[type="search"] {
-    border-color: $gray-600;
-    background-color: $gray-900;
-    color: $gray-200;
-  }
-}
-
+// Make search a little narrower than the default
 input[type="search"] {
-  border-color: $border-color;
   width: 12rem;
 }
 

inst/BS5/templates/navbar.html

@@ -1,5 +1,5 @@
 {{#navbar}}
-<nav class="navbar fixed-top navbar-{{{type}}} navbar-expand-lg bg-{{{bg}}}" data-bs-theme="{{{type}}}" aria-label="{{#translate}}{{site_nav}}{{/translate}}">
+<nav class="navbar navbar-expand-lg fixed-top bg-{{{bg}}}" {{#is_dark}}data-bs-theme="dark"{{/is_dark}} aria-label="{{#translate}}{{site_nav}}{{/translate}}">
   <div class="container">
     {{#includes}}{{{before_title}}}{{/includes}}
     <a class="navbar-brand me-2" href="{{#site}}{{root}}{{/site}}index.html">{{#site}}{{title}}{{/site}}</a>

tests/testthat/test-navbar.R

@@ -143,23 +143,21 @@ test_that("data_navbar() errors with bad left/right", {
    expect_snapshot(data_navbar(pkg), error = TRUE)
 })
 
-
 test_that("for bs4, default bg and type come from bootswatch", {
   style <- navbar_style(bs_version = 5)
-  expect_equal(style, list(bg = "light", type = "light"))
+  expect_equal(style, list(bg = "light", is_dark = FALSE))
 
   style <- navbar_style(theme = "cyborg", bs_version = 5)
-  expect_equal(style, list(bg = "dark", type = "dark"))
+  expect_equal(style, list(bg = "dark", is_dark = TRUE))
 
   # but can override
   style <- navbar_style(list(bg = "primary"), bs_version = 5)
-  expect_equal(style, list(bg = "primary", type = "dark"))
+  expect_equal(style, list(bg = "primary", is_dark = TRUE))
 
   style <- navbar_style(list(bg = "primary", type = "light"), bs_version = 5)
-  expect_equal(style, list(bg = "primary", type = "light"))
+  expect_equal(style, list(bg = "primary", is_dark = FALSE))
 })
 
-
 test_that("render_navbar_links BS3 & BS4 default", {
   x <- list(
     intro =  menu_link("Get started", "articles/pkgdown.html"),