feat: Only use .navbar-default and .navbar-inverse classes in BS <5

inst/bs3compat/_navbar_compat.scss

@@ -72,6 +72,13 @@ ul.nav.navbar-nav {
   }
 }
 
+@mixin navbar-background-dark($important: false) {
+  background-color: var(--bslib-navbar-inverse-bg, var(--#{$prefix}dark)) if($important, !important, null);
+}
+
+@mixin navbar-background-light($important: false) {
+  background-color: var(--bslib-navbar-default-bg, var(--#{$prefix}light)) if($important, !important, null);
+}
 
 .navbar {
 
@@ -83,22 +90,35 @@ ul.nav.navbar-nav {
     --bslib-navbar-inverse-bg: #{$navbar-dark-bg};
   }
 
-  // BS3 .navbar-default -> BS4 .navbar-light
-  &.navbar-default {
-    // Sets a variety of fg colors which are configurable via $navbar-light-* options
-    @extend .navbar-light;
-    background-color: var(--bslib-navbar-default-bg, var(--#{$prefix}light)) !important;
+  @if $bootstrap-version < 5 {
+    // BS3 .navbar-default -> BS4 .navbar-light
+    &.navbar-default {
+      // Sets a variety of fg colors which are configurable via $navbar-light-* options
+      @extend .navbar-light;
+      @include navbar-background-dark($important: true);
+    }
+
+    // BS3 .navbar-inverse -> BS4 .navbar-dark
+    &.navbar-inverse {
+      // Sets a variety of fg colors which are configurable via $navbar-dark-* options
+      @extend .navbar-dark;
+      @include navbar-background-dark($important: true);
+    }
   }
+}
 
-  // BS3 .navbar-inverse -> BS4 .navbar-dark
-  &.navbar-inverse {
-    // Sets a variety of fg colors which are configurable via $navbar-dark-* options
-    @extend .navbar-dark;
-    background-color: var(--bslib-navbar-inverse-bg, var(--#{$prefix}dark)) !important;
-    // For BS5+ lean on emphasis-color
-    --bs-emphasis-color: white;
-    --bs-emphasis-color-rgb: 255, 255, 255;
+@if $bootstrap-version >= 5 {
+  .navbar {
+    background-color: $navbar-bg;
   }
+
+  [data-bs-theme="dark"] .navbar { @include navbar-background-dark(); }
+  [data-bs-theme="light"] .navbar { @include navbar-background-light(); }
+
+  // These are defined *after* the above rules because we want the local version
+  // to win without having to resort to specificity tricks.
+  .navbar[data-bs-theme="dark"] { @include navbar-background-dark(); }
+  .navbar[data-bs-theme="light"] { @include navbar-background-light(); }
 }
 
 // Implement bs3 navbar toggler; used in Rmd websites, i.e.

inst/builtin/bs5/shiny/_rules.scss

@@ -174,15 +174,6 @@ $bslib-checkbox-radio-margin-right: 0.35em !default;
   }
 
   .bslib-page-navbar, .bslib-page-dashboard {
-    > .navbar {
-      @if not $navbar-light-bg and not $navbar-bg {
-        --bslib-navbar-default-bg: var(--#{$prefix}body-bg);
-      }
-      @if not $navbar-dark-bg and not $navbar-bg {
-        --bslib-navbar-inverse-bg: var(--#{$prefix}body-color);
-      }
-    }
-
     > .navbar + div {
       // Since we're using a transparent navbar, we need to (generally) add a border-top
       border-top: $card-border-width solid $card-border-color;

inst/lib/bs5/scss/_navbar.scss

@@ -296,6 +296,7 @@
 }
 
 .navbar-dark,
+[data-bs-theme="dark"] .navbar,
 .navbar[data-bs-theme="dark"] {
   // scss-docs-start navbar-dark-css-vars
   --#{$prefix}navbar-color: #{$navbar-dark-color};
@@ -322,3 +323,15 @@
     }
   }
 }
+
+.navbar[data-bs-theme="light"] {
+  // patched: Make sure local light navbar overrides page global
+  --#{$prefix}navbar-color: #{$navbar-light-color};
+  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
+  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
+  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
+  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
+  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
+  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
+  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
+}

tools/patches/034-bs5-navbar-bg.patch

@@ -0,0 +1,44 @@
+diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
+index 988bbe09..ba75744e 100644
+--- a/inst/lib/bs5/scss/_navbar.scss
++++ b/inst/lib/bs5/scss/_navbar.scss
+@@ -296,6 +296,7 @@
+ }
+
+ .navbar-dark,
++[data-bs-theme="dark"] .navbar,
+ .navbar[data-bs-theme="dark"] {
+   // scss-docs-start navbar-dark-css-vars
+   --#{$prefix}navbar-color: #{$navbar-dark-color};
+@@ -307,12 +308,30 @@
+   --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
+   --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+   // scss-docs-end navbar-dark-css-vars
++
++  // patched: toggler icon should follow closest navbar color mode over global mode
++  .navbar-toggler-icon {
++    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
++  }
+ }
+
+ @if $enable-dark-mode {
+   @include color-mode(dark) {
+-    .navbar-toggler-icon {
++    // patched: toggler follows global theme unless in a light region
++    .navbar:not([data-bs-theme="light"]) .navbar-toggler-icon {
+       --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+     }
+   }
+ }
++
++.navbar[data-bs-theme="light"] {
++  // patched: Make sure local light navbar overrides page global
++  --#{$prefix}navbar-color: #{$navbar-light-color};
++  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
++  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
++  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
++  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
++  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
++  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
++  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
++}