From 3025973a763c921edd3adf6732b615511ce10972 Mon Sep 17 00:00:00 2001
From: Garrick Aden-Buie <garrick@adenbuie.com>
Date: Tue, 19 Nov 2024 09:26:47 -0500
Subject: [PATCH 01/16] fix(navbar): Don't flip navbar bg in dark mode

This rule only changes the background color of the navbar,
which is not enough to fully restyle the navbar in dark mode.
It might work in the default cases, but it certainly does not
work if users have set $navbar-dark-bg or $navbar-light-bg
to appropriate values. Note that Bootstrap expects the navbar
colors to be static (i.e. the same in light and dark mode), so if
we want to support different navbar colors we'll need to
implement something better.
---
 inst/bs3compat/_navbar_compat.scss | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/inst/bs3compat/_navbar_compat.scss b/inst/bs3compat/_navbar_compat.scss
index 9322d1863..b1cda2774 100644
--- a/inst/bs3compat/_navbar_compat.scss
+++ b/inst/bs3compat/_navbar_compat.scss
@@ -101,15 +101,6 @@ ul.nav.navbar-nav {
   }
 }
 
-$enable-dark-mode: false !default;
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .navbar.navbar-default {
-      background-color: var(--bslib-navbar-default-bg, var(--#{$prefix}dark)) !important;
-    }
-  }
-}
-
 // Implement bs3 navbar toggler; used in Rmd websites, i.e.
 // https://github.com/rstudio/rmarkdown-website/blob/453e1802b32b5baf1c8a67f80947adcc53e49b7f/_navbar.html
 .navbar-toggle {

From fa2d4b5ce668baf0bc86582bd7259c25d69c3f59 Mon Sep 17 00:00:00 2001
From: Garrick Aden-Buie <garrick@adenbuie.com>
Date: Tue, 19 Nov 2024 10:07:26 -0500
Subject: [PATCH 02/16] fix(bootstrap): Navbar toggler icon should follow
 navbar color mode

Bootstrap has the navbar toggler icon follow the global color mode, which makes the icon invisible when placed on a light background in dark mode. Outside of this rule, Bootstrap expects the navbar color to be consistent in light and dark mode.
---
 inst/lib/bs5/scss/_navbar.scss                |  9 +++------
 ...34-bs5-navbar-toggler-icon-dark-mode.patch | 20 +++++++++++++++++++
 2 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 tools/patches/034-bs5-navbar-toggler-icon-dark-mode.patch

diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
index 988bbe09c..745fd5bd0 100644
--- a/inst/lib/bs5/scss/_navbar.scss
+++ b/inst/lib/bs5/scss/_navbar.scss
@@ -307,12 +307,9 @@
   --#{$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
-}
 
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .navbar-toggler-icon {
-      --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
-    }
+  // patched: toggler icon should follow navbar color mode, not global mode
+  .navbar-toggler-icon {
+    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
   }
 }
diff --git a/tools/patches/034-bs5-navbar-toggler-icon-dark-mode.patch b/tools/patches/034-bs5-navbar-toggler-icon-dark-mode.patch
new file mode 100644
index 000000000..59ea67a16
--- /dev/null
+++ b/tools/patches/034-bs5-navbar-toggler-icon-dark-mode.patch
@@ -0,0 +1,20 @@
+diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
+index 988bbe09..745fd5bd 100644
+--- a/inst/lib/bs5/scss/_navbar.scss
++++ b/inst/lib/bs5/scss/_navbar.scss
+@@ -307,12 +307,9 @@
+   --#{$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
+-}
+ 
+-@if $enable-dark-mode {
+-  @include color-mode(dark) {
+-    .navbar-toggler-icon {
+-      --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+-    }
++  // patched: toggler icon should follow navbar color mode, not global mode
++  .navbar-toggler-icon {
++    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+   }
+ }

From 30768bbaa931654b9db196b4c989cf8bcb401eea Mon Sep 17 00:00:00 2001
From: Garrick Aden-Buie <garrick@adenbuie.com>
Date: Tue, 19 Nov 2024 10:25:18 -0500
Subject: [PATCH 03/16] fix(bootstrap): Keep global color mode follow

---
 inst/lib/bs5/scss/_navbar.scss                | 12 +++++++-
 ...34-bs5-navbar-toggler-icon-dark-mode.patch | 28 +++++++++++--------
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
index 745fd5bd0..2d80dc823 100644
--- a/inst/lib/bs5/scss/_navbar.scss
+++ b/inst/lib/bs5/scss/_navbar.scss
@@ -308,8 +308,18 @@
   --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
   // scss-docs-end navbar-dark-css-vars
 
-  // patched: toggler icon should follow navbar color mode, not global mode
+
+  // 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) {
+    // 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)};
+    }
+  }
+}
diff --git a/tools/patches/034-bs5-navbar-toggler-icon-dark-mode.patch b/tools/patches/034-bs5-navbar-toggler-icon-dark-mode.patch
index 59ea67a16..9b6c40b76 100644
--- a/tools/patches/034-bs5-navbar-toggler-icon-dark-mode.patch
+++ b/tools/patches/034-bs5-navbar-toggler-icon-dark-mode.patch
@@ -1,20 +1,24 @@
 diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
-index 988bbe09..745fd5bd 100644
+index 745fd5bd..fea86165 100644
 --- a/inst/lib/bs5/scss/_navbar.scss
 +++ b/inst/lib/bs5/scss/_navbar.scss
-@@ -307,12 +307,9 @@
-   --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
+@@ -308,8 +308,18 @@
    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
    // scss-docs-end navbar-dark-css-vars
--}
  
--@if $enable-dark-mode {
--  @include color-mode(dark) {
--    .navbar-toggler-icon {
--      --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
--    }
-+  // patched: toggler icon should follow navbar color mode, not global mode
-+  .navbar-toggler-icon {
-+    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+-  // patched: toggler icon should follow navbar color mode, not global mode
++
++  // 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) {
++    // 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)};
++    }
++  }
++}

From 6362dc17d132ba59aa0a8cc751288847fe5b309e Mon Sep 17 00:00:00 2001
From: Garrick Aden-Buie <garrick@adenbuie.com>
Date: Tue, 19 Nov 2024 10:35:21 -0500
Subject: [PATCH 04/16] fix: Fix `_navbar.scss` patch

---
 inst/lib/bs5/scss/_navbar.scss                |  1 -
 ...34-bs5-navbar-toggler-icon-dark-mode.patch | 27 +++++++++----------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
index 2d80dc823..dcd3c28a1 100644
--- a/inst/lib/bs5/scss/_navbar.scss
+++ b/inst/lib/bs5/scss/_navbar.scss
@@ -308,7 +308,6 @@
   --#{$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)};
diff --git a/tools/patches/034-bs5-navbar-toggler-icon-dark-mode.patch b/tools/patches/034-bs5-navbar-toggler-icon-dark-mode.patch
index 9b6c40b76..3f2740b6c 100644
--- a/tools/patches/034-bs5-navbar-toggler-icon-dark-mode.patch
+++ b/tools/patches/034-bs5-navbar-toggler-icon-dark-mode.patch
@@ -1,24 +1,23 @@
 diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
-index 745fd5bd..fea86165 100644
+index 988bbe09..dcd3c28a 100644
 --- a/inst/lib/bs5/scss/_navbar.scss
 +++ b/inst/lib/bs5/scss/_navbar.scss
-@@ -308,8 +308,18 @@
+@@ -307,11 +307,17 @@
+   --#{$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 navbar color mode, not global mode
 +
 +  // 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)};
-   }
++  .navbar-toggler-icon {
++    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
++  }
  }
-+
-+@if $enable-dark-mode {
-+  @include color-mode(dark) {
+ 
+ @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)};
-+    }
-+  }
-+}
+       --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+     }
+   }

From b076c564bd1428b87e9a2db5eff060d26c7602c0 Mon Sep 17 00:00:00 2001
From: Garrick Aden-Buie <garrick@adenbuie.com>
Date: Mon, 25 Nov 2024 14:44:46 -0500
Subject: [PATCH 05/16] feat: Only use `.navbar-default` and `.navbar-inverse`
 classes in BS <5

---
 inst/bs3compat/_navbar_compat.scss            | 46 +++++++++++++------
 inst/builtin/bs5/shiny/_rules.scss            |  9 ----
 inst/lib/bs5/scss/_navbar.scss                | 13 ++++++
 tools/patches/034-bs5-navbar-bg.patch         | 44 ++++++++++++++++++
 ...34-bs5-navbar-toggler-icon-dark-mode.patch | 23 ----------
 5 files changed, 90 insertions(+), 45 deletions(-)
 create mode 100644 tools/patches/034-bs5-navbar-bg.patch
 delete mode 100644 tools/patches/034-bs5-navbar-toggler-icon-dark-mode.patch

diff --git a/inst/bs3compat/_navbar_compat.scss b/inst/bs3compat/_navbar_compat.scss
index b1cda2774..1c1e01019 100644
--- a/inst/bs3compat/_navbar_compat.scss
+++ b/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.
diff --git a/inst/builtin/bs5/shiny/_rules.scss b/inst/builtin/bs5/shiny/_rules.scss
index 64f3316ca..aa7b7eef2 100644
--- a/inst/builtin/bs5/shiny/_rules.scss
+++ b/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;
diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
index dcd3c28a1..ba75744e7 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};
@@ -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};
+}
diff --git a/tools/patches/034-bs5-navbar-bg.patch b/tools/patches/034-bs5-navbar-bg.patch
new file mode 100644
index 000000000..8e20912e0
--- /dev/null
+++ b/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};
++}
diff --git a/tools/patches/034-bs5-navbar-toggler-icon-dark-mode.patch b/tools/patches/034-bs5-navbar-toggler-icon-dark-mode.patch
deleted file mode 100644
index 3f2740b6c..000000000
--- a/tools/patches/034-bs5-navbar-toggler-icon-dark-mode.patch
+++ /dev/null
@@ -1,23 +0,0 @@
-diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
-index 988bbe09..dcd3c28a 100644
---- a/inst/lib/bs5/scss/_navbar.scss
-+++ b/inst/lib/bs5/scss/_navbar.scss
-@@ -307,11 +307,17 @@
-   --#{$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)};
-     }
-   }

From 242cf4ece5ece3ac4571bedf0e63e209b1414aaf Mon Sep 17 00:00:00 2001
From: Garrick Aden-Buie <garrick@adenbuie.com>
Date: Mon, 25 Nov 2024 15:01:05 -0500
Subject: [PATCH 06/16] fix(navbar_compat): navbar light background

---
 inst/bs3compat/_navbar_compat.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/inst/bs3compat/_navbar_compat.scss b/inst/bs3compat/_navbar_compat.scss
index 1c1e01019..8c42bf90e 100644
--- a/inst/bs3compat/_navbar_compat.scss
+++ b/inst/bs3compat/_navbar_compat.scss
@@ -95,7 +95,7 @@ ul.nav.navbar-nav {
     &.navbar-default {
       // Sets a variety of fg colors which are configurable via $navbar-light-* options
       @extend .navbar-light;
-      @include navbar-background-dark($important: true);
+      @include navbar-background-light($important: true);
     }
   
     // BS3 .navbar-inverse -> BS4 .navbar-dark

From c3ad62bb3ac40975ef74b330cf2260706566da2d Mon Sep 17 00:00:00 2001
From: Garrick Aden-Buie <garrick@adenbuie.com>
Date: Wed, 27 Nov 2024 13:37:29 -0500
Subject: [PATCH 07/16] feat: account for navbar in light mode region

---
 inst/lib/bs5/scss/_navbar.scss        | 13 ++++++----
 tools/patches/034-bs5-navbar-bg.patch | 34 +++++++++++++++++++++------
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
index ba75744e7..74228f690 100644
--- a/inst/lib/bs5/scss/_navbar.scss
+++ b/inst/lib/bs5/scss/_navbar.scss
@@ -3,7 +3,8 @@
 // Provide a static navbar from which we expand to create full-width, fixed, and
 // other navbar variations.
 
-.navbar {
+.navbar,
+[data-bs-theme="light"] .navbar { // bslib-patched: explicitly set navbar props in light mode regions
   // scss-docs-start navbar-css-vars
   --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
   --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
@@ -26,7 +27,9 @@
   --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
   --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
   // scss-docs-end navbar-css-vars
+}
 
+.navbar {
   position: relative;
   display: flex;
   display: -webkit-flex;
@@ -296,7 +299,7 @@
 }
 
 .navbar-dark,
-[data-bs-theme="dark"] .navbar,
+[data-bs-theme="dark"] .navbar, // bslib-patched: dark mode inside dark regions
 .navbar[data-bs-theme="dark"] {
   // scss-docs-start navbar-dark-css-vars
   --#{$prefix}navbar-color: #{$navbar-dark-color};
@@ -309,7 +312,7 @@
   --#{$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
+  // bslib-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)};
   }
@@ -317,7 +320,7 @@
 
 @if $enable-dark-mode {
   @include color-mode(dark) {
-    // patched: toggler follows global theme unless in a light region
+    // bslib-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)};
     }
@@ -325,7 +328,7 @@
 }
 
 .navbar[data-bs-theme="light"] {
-  // patched: Make sure local light navbar overrides page global
+  // bslib-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};
diff --git a/tools/patches/034-bs5-navbar-bg.patch b/tools/patches/034-bs5-navbar-bg.patch
index 8e20912e0..f223cf48e 100644
--- a/tools/patches/034-bs5-navbar-bg.patch
+++ b/tools/patches/034-bs5-navbar-bg.patch
@@ -1,21 +1,41 @@
 diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
-index 988bbe09..ba75744e 100644
+index 988bbe09..74228f69 100644
 --- a/inst/lib/bs5/scss/_navbar.scss
 +++ b/inst/lib/bs5/scss/_navbar.scss
-@@ -296,6 +296,7 @@
+@@ -3,7 +3,8 @@
+ // Provide a static navbar from which we expand to create full-width, fixed, and
+ // other navbar variations.
+ 
+-.navbar {
++.navbar,
++[data-bs-theme="light"] .navbar { // bslib-patched: explicitly set navbar props in light mode regions
+   // scss-docs-start navbar-css-vars
+   --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
+   --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
+@@ -26,7 +27,9 @@
+   --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
+   --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
+   // scss-docs-end navbar-css-vars
++}
+ 
++.navbar {
+   position: relative;
+   display: flex;
+   display: -webkit-flex;
+@@ -296,6 +299,7 @@
  }
  
  .navbar-dark,
-+[data-bs-theme="dark"] .navbar,
++[data-bs-theme="dark"] .navbar, // bslib-patched: dark mode inside dark regions
  .navbar[data-bs-theme="dark"] {
    // scss-docs-start navbar-dark-css-vars
    --#{$prefix}navbar-color: #{$navbar-dark-color};
-@@ -307,12 +308,30 @@
+@@ -307,12 +311,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
++  // bslib-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)};
 +  }
@@ -24,7 +44,7 @@ index 988bbe09..ba75744e 100644
  @if $enable-dark-mode {
    @include color-mode(dark) {
 -    .navbar-toggler-icon {
-+    // patched: toggler follows global theme unless in a light region
++    // bslib-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)};
      }
@@ -32,7 +52,7 @@ index 988bbe09..ba75744e 100644
  }
 +
 +.navbar[data-bs-theme="light"] {
-+  // patched: Make sure local light navbar overrides page global
++  // bslib-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};

From cd4b7cfdf9d61393ceb6480fcfb8e6cc3fbd64d7 Mon Sep 17 00:00:00 2001
From: Garrick Aden-Buie <garrick@adenbuie.com>
Date: Tue, 3 Dec 2024 10:12:27 -0500
Subject: [PATCH 08/16] feat: use `--bslib-navbar-{light,dark}-bg` variables

---
 inst/bs3compat/_navbar_compat.scss | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/inst/bs3compat/_navbar_compat.scss b/inst/bs3compat/_navbar_compat.scss
index 8c42bf90e..a867bafa4 100644
--- a/inst/bs3compat/_navbar_compat.scss
+++ b/inst/bs3compat/_navbar_compat.scss
@@ -72,22 +72,27 @@ ul.nav.navbar-nav {
   }
 }
 
+:root {
+  --bslib-navbar-light-bg: var(--bslib-navbar-default-bg, var(--#{$prefix}light));
+  --bslib-navbar-dark-bg: var(--bslib-navbar-inverse-bg, var(--#{$prefix}black));
+}
+
 @mixin navbar-background-dark($important: false) {
-  background-color: var(--bslib-navbar-inverse-bg, var(--#{$prefix}dark)) if($important, !important, null);
+  background-color: var(--bslib-navbar-dark-bg) if($important, !important, null);
 }
 
 @mixin navbar-background-light($important: false) {
-  background-color: var(--bslib-navbar-default-bg, var(--#{$prefix}light)) if($important, !important, null);
+  background-color: var(--bslib-navbar-light-bg) if($important, !important, null);
 }
 
 .navbar {
 
   // Defaults to null (and in that case, we don't want to define the CSS var)
   @if $navbar-light-bg {
-    --bslib-navbar-default-bg: #{$navbar-light-bg};
+    --bslib-navbar-light-bg: #{$navbar-light-bg};
   }
   @if $navbar-dark-bg {
-    --bslib-navbar-inverse-bg: #{$navbar-dark-bg};
+    --bslib-navbar-dark-bg: #{$navbar-dark-bg};
   }
 
   @if $bootstrap-version < 5 {

From e78a4cd3862fe65901474967161c2ef8f62f0508 Mon Sep 17 00:00:00 2001
From: Garrick Aden-Buie <garrick@adenbuie.com>
Date: Tue, 3 Dec 2024 10:13:06 -0500
Subject: [PATCH 09/16] feat(shiny-preset): Use border-bottom for default
 navbar not in a dashboard page

---
 inst/builtin/bs5/shiny/_rules.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/inst/builtin/bs5/shiny/_rules.scss b/inst/builtin/bs5/shiny/_rules.scss
index aa7b7eef2..4bcb69c41 100644
--- a/inst/builtin/bs5/shiny/_rules.scss
+++ b/inst/builtin/bs5/shiny/_rules.scss
@@ -173,7 +173,17 @@ $bslib-checkbox-radio-margin-right: 0.35em !default;
     background-color: var(--bslib-dashboard-main-bg);
   }
 
+  .navbar {
+    // Add border-bottom for general navbars (primarily in non-bslib contexts)
+    border-bottom: $card-border-width solid $card-border-color;
+  }
+
   .bslib-page-navbar, .bslib-page-dashboard {
+    // Inside bslib we only add the border on the top-level navbar
+    .navbar {
+      border-bottom: none;
+    }
+    
     > .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;

From 1d3babcacd788b145b0c8e44efae9d4ac63e0e96 Mon Sep 17 00:00:00 2001
From: Garrick Aden-Buie <garrick@adenbuie.com>
Date: Tue, 3 Dec 2024 10:14:38 -0500
Subject: [PATCH 10/16] refactor(shiny-preset): Use Sass vars to set navbar
 light/dark bg

---
 inst/builtin/bs5/shiny/_variables.scss | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/inst/builtin/bs5/shiny/_variables.scss b/inst/builtin/bs5/shiny/_variables.scss
index 71d44d4d4..c7d45a002 100644
--- a/inst/builtin/bs5/shiny/_variables.scss
+++ b/inst/builtin/bs5/shiny/_variables.scss
@@ -148,6 +148,21 @@ $bslib-sidebar-fg: null !default;
   $bslib-sidebar-fg: color-contrast($bslib-sidebar-bg);
 }
 
+// From inst/lib/bs5/scss/_variables.scss
+// Repeated here so that we can set navbar light/dark to `--bs-body-bg`
+$navbar-bg:       null !default; // Background color for any navbarPage()
+$navbar-light-bg: $navbar-bg !default; // Background color for navbarPage(inverse = FALSE)
+$navbar-dark-bg:  $navbar-bg !default; // Background color for navbarPage(inverse = TRUE)
+
+@if $bslib-dashboard-design and $navbar-bg == null {
+  @if $navbar-light-bg == null {
+    $navbar-light-bg: var(--#{$prefix}body-bg);
+  }
+  @if $navbar-dark-bg == null {
+    $navbar-dark-bg: var(--#{$prefix}body-bg);
+  }
+}
+
 $border-color-translucent: if($bslib-dashboard-design, rgba(40, 70, 94, 0.1), null) !default;
 $border-color-translucent-dark: if($bslib-dashboard-design, rgba(255, 255, 255, 0.1), null) !default;
 

From a552e597be01b081e7df5b3fe704accdb3de26a5 Mon Sep 17 00:00:00 2001
From: Garrick Aden-Buie <garrick@adenbuie.com>
Date: Tue, 3 Dec 2024 10:15:16 -0500
Subject: [PATCH 11/16] fix(bs5): Selector on light-region navbar-toggler-icon

---
 inst/lib/bs5/scss/_navbar.scss        | 5 ++++-
 tools/patches/034-bs5-navbar-bg.patch | 9 ++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
index 74228f690..30567fa9a 100644
--- a/inst/lib/bs5/scss/_navbar.scss
+++ b/inst/lib/bs5/scss/_navbar.scss
@@ -335,6 +335,9 @@
   --#{$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};
+  
+  .navbar-toggler-icon {
+    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
+  }
 }
diff --git a/tools/patches/034-bs5-navbar-bg.patch b/tools/patches/034-bs5-navbar-bg.patch
index f223cf48e..3e0fd44a8 100644
--- a/tools/patches/034-bs5-navbar-bg.patch
+++ b/tools/patches/034-bs5-navbar-bg.patch
@@ -1,5 +1,5 @@
 diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
-index 988bbe09..74228f69 100644
+index 988bbe09..30567fa9 100644
 --- a/inst/lib/bs5/scss/_navbar.scss
 +++ b/inst/lib/bs5/scss/_navbar.scss
 @@ -3,7 +3,8 @@
@@ -30,7 +30,7 @@ index 988bbe09..74228f69 100644
  .navbar[data-bs-theme="dark"] {
    // scss-docs-start navbar-dark-css-vars
    --#{$prefix}navbar-color: #{$navbar-dark-color};
-@@ -307,12 +311,30 @@
+@@ -307,12 +311,33 @@
    --#{$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
@@ -59,6 +59,9 @@ index 988bbe09..74228f69 100644
 +  --#{$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};
++  
++  .navbar-toggler-icon {
++    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
++  }
 +}

From ece9fbf9c771509ed5294fab7c37b972be2b8687 Mon Sep 17 00:00:00 2001
From: Garrick Aden-Buie <garrick@adenbuie.com>
Date: Tue, 3 Dec 2024 12:28:24 -0500
Subject: [PATCH 12/16] fix(navbar): Dark/light adjustments need to have the
 lowest specificity possible

Otherwise they get in the way of local classes, e.g. `bg-blue` or `bg-primary`,
which are the primary mechanism for setting navbar color in BS5

https://getbootstrap.com/docs/5.3/components/navbar/#color-schemes
---
 inst/bs3compat/_navbar_compat.scss    |  8 +++---
 inst/lib/bs5/scss/_navbar.scss        | 24 ++++++++---------
 tools/patches/034-bs5-navbar-bg.patch | 38 +++++++++++++--------------
 3 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/inst/bs3compat/_navbar_compat.scss b/inst/bs3compat/_navbar_compat.scss
index a867bafa4..c869dcaa1 100644
--- a/inst/bs3compat/_navbar_compat.scss
+++ b/inst/bs3compat/_navbar_compat.scss
@@ -117,13 +117,13 @@ ul.nav.navbar-nav {
     background-color: $navbar-bg;
   }
   
-  [data-bs-theme="dark"] .navbar { @include navbar-background-dark(); }
-  [data-bs-theme="light"] .navbar { @include navbar-background-light(); }
+  :where([data-bs-theme="dark"] .navbar) { @include navbar-background-dark(); }
+  :where([data-bs-theme="light"] .navbar, .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(); }
+  :where(.navbar[data-bs-theme="dark"]) { @include navbar-background-dark(); }
+  :where(.navbar[data-bs-theme="light"]) { @include navbar-background-light(); }
 }
 
 // Implement bs3 navbar toggler; used in Rmd websites, i.e.
diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
index 30567fa9a..cbeef8d04 100644
--- a/inst/lib/bs5/scss/_navbar.scss
+++ b/inst/lib/bs5/scss/_navbar.scss
@@ -4,7 +4,7 @@
 // other navbar variations.
 
 .navbar,
-[data-bs-theme="light"] .navbar { // bslib-patched: explicitly set navbar props in light mode regions
+:where([data-bs-theme="light"] .navbar) { // bslib-patched: explicitly set navbar props in light mode regions
   // scss-docs-start navbar-css-vars
   --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
   --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
@@ -299,8 +299,8 @@
 }
 
 .navbar-dark,
-[data-bs-theme="dark"] .navbar, // bslib-patched: dark mode inside dark regions
-.navbar[data-bs-theme="dark"] {
+:where([data-bs-theme="dark"] .navbar), // bslib-patched: dark mode inside dark regions
+:where(.navbar[data-bs-theme="dark"]) {
   // scss-docs-start navbar-dark-css-vars
   --#{$prefix}navbar-color: #{$navbar-dark-color};
   --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
@@ -311,23 +311,23 @@
   --#{$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
+}
 
+:where(.navbar[data-bs-theme="dark"] .navbar-toggler-icon) {
   // bslib-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)};
-  }
+  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
 }
 
 @if $enable-dark-mode {
   @include color-mode(dark) {
     // bslib-patched: toggler follows global theme unless in a light region
-    .navbar:not([data-bs-theme="light"]) .navbar-toggler-icon {
+    :where(.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"] {
+:where(.navbar[data-bs-theme="light"]) {
   // bslib-patched: Make sure local light navbar overrides page global
   --#{$prefix}navbar-color: #{$navbar-light-color};
   --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
@@ -336,8 +336,8 @@
   --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
   --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
   --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
-  
-  .navbar-toggler-icon {
-    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
-  }
+}  
+:where(.navbar[data-bs-theme="light"] .navbar-toggler-icon) {
+  // bslib-patched: Make sure toggler icon follows local light mode, too
+  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
 }
diff --git a/tools/patches/034-bs5-navbar-bg.patch b/tools/patches/034-bs5-navbar-bg.patch
index 3e0fd44a8..8e522c702 100644
--- a/tools/patches/034-bs5-navbar-bg.patch
+++ b/tools/patches/034-bs5-navbar-bg.patch
@@ -1,5 +1,5 @@
 diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
-index 988bbe09..30567fa9 100644
+index 988bbe09..cbeef8d0 100644
 --- a/inst/lib/bs5/scss/_navbar.scss
 +++ b/inst/lib/bs5/scss/_navbar.scss
 @@ -3,7 +3,8 @@
@@ -8,7 +8,7 @@ index 988bbe09..30567fa9 100644
  
 -.navbar {
 +.navbar,
-+[data-bs-theme="light"] .navbar { // bslib-patched: explicitly set navbar props in light mode regions
++:where([data-bs-theme="light"] .navbar) { // bslib-patched: explicitly set navbar props in light mode regions
    // scss-docs-start navbar-css-vars
    --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
    --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
@@ -22,36 +22,36 @@ index 988bbe09..30567fa9 100644
    position: relative;
    display: flex;
    display: -webkit-flex;
-@@ -296,6 +299,7 @@
+@@ -296,7 +299,8 @@
  }
  
  .navbar-dark,
-+[data-bs-theme="dark"] .navbar, // bslib-patched: dark mode inside dark regions
- .navbar[data-bs-theme="dark"] {
+-.navbar[data-bs-theme="dark"] {
++:where([data-bs-theme="dark"] .navbar), // bslib-patched: dark mode inside dark regions
++:where(.navbar[data-bs-theme="dark"]) {
    // scss-docs-start navbar-dark-css-vars
    --#{$prefix}navbar-color: #{$navbar-dark-color};
-@@ -307,12 +311,33 @@
-   --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
-   --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+   --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
+@@ -309,10 +313,31 @@
    // scss-docs-end navbar-dark-css-vars
-+
-+  // bslib-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)};
-+  }
  }
  
++:where(.navbar[data-bs-theme="dark"] .navbar-toggler-icon) {
++  // bslib-patched: toggler icon should follow closest navbar color mode over global mode
++  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
++}
++
  @if $enable-dark-mode {
    @include color-mode(dark) {
 -    .navbar-toggler-icon {
 +    // bslib-patched: toggler follows global theme unless in a light region
-+    .navbar:not([data-bs-theme="light"]) .navbar-toggler-icon {
++    :where(.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"] {
++:where(.navbar[data-bs-theme="light"]) {
 +  // bslib-patched: Make sure local light navbar overrides page global
 +  --#{$prefix}navbar-color: #{$navbar-light-color};
 +  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
@@ -60,8 +60,8 @@ index 988bbe09..30567fa9 100644
 +  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
 +  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
 +  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
-+  
-+  .navbar-toggler-icon {
-+    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
-+  }
++}  
++:where(.navbar[data-bs-theme="light"] .navbar-toggler-icon) {
++  // bslib-patched: Make sure toggler icon follows local light mode, too
++  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
 +}

From abf741bc7e36e6f84b35e183bc58b1388dac8ea1 Mon Sep 17 00:00:00 2001
From: Garrick Aden-Buie <garrick@adenbuie.com>
Date: Tue, 3 Dec 2024 13:40:16 -0500
Subject: [PATCH 13/16] fix(navbar): Use `:where()` to reduce navbar dark/light
 styles to minimal specificity

---
 inst/lib/bs5/scss/_navbar.scss        | 19 ++++++++++---------
 tools/patches/034-bs5-navbar-bg.patch | 26 +++++++++++++-------------
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
index cbeef8d04..d4e32d1ff 100644
--- a/inst/lib/bs5/scss/_navbar.scss
+++ b/inst/lib/bs5/scss/_navbar.scss
@@ -4,7 +4,7 @@
 // other navbar variations.
 
 .navbar,
-:where([data-bs-theme="light"] .navbar) { // bslib-patched: explicitly set navbar props in light mode regions
+:where([data-bs-theme="light"]) .navbar { // bslib-patched: explicitly set navbar props in light mode regions
   // scss-docs-start navbar-css-vars
   --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
   --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
@@ -299,8 +299,8 @@
 }
 
 .navbar-dark,
-:where([data-bs-theme="dark"] .navbar), // bslib-patched: dark mode inside dark regions
-:where(.navbar[data-bs-theme="dark"]) {
+:where([data-bs-theme="dark"]) .navbar, // bslib-patched: dark mode inside dark regions
+.navbar[data-bs-theme="dark"] {
   // scss-docs-start navbar-dark-css-vars
   --#{$prefix}navbar-color: #{$navbar-dark-color};
   --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
@@ -327,7 +327,7 @@
   }
 }
 
-:where(.navbar[data-bs-theme="light"]) {
+.navbar[data-bs-theme="light"] {
   // bslib-patched: Make sure local light navbar overrides page global
   --#{$prefix}navbar-color: #{$navbar-light-color};
   --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
@@ -336,8 +336,9 @@
   --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
   --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
   --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
-}  
-:where(.navbar[data-bs-theme="light"] .navbar-toggler-icon) {
-  // bslib-patched: Make sure toggler icon follows local light mode, too
-  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
-}
+
+  .navbar-toggler-icon {
+    // bslib-patched: Make sure toggler icon follows local light mode, too
+    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
+  }
+}
\ No newline at end of file
diff --git a/tools/patches/034-bs5-navbar-bg.patch b/tools/patches/034-bs5-navbar-bg.patch
index 8e522c702..b03d54d21 100644
--- a/tools/patches/034-bs5-navbar-bg.patch
+++ b/tools/patches/034-bs5-navbar-bg.patch
@@ -1,5 +1,5 @@
 diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
-index 988bbe09..cbeef8d0 100644
+index 988bbe09..d4e32d1f 100644
 --- a/inst/lib/bs5/scss/_navbar.scss
 +++ b/inst/lib/bs5/scss/_navbar.scss
 @@ -3,7 +3,8 @@
@@ -8,7 +8,7 @@ index 988bbe09..cbeef8d0 100644
  
 -.navbar {
 +.navbar,
-+:where([data-bs-theme="light"] .navbar) { // bslib-patched: explicitly set navbar props in light mode regions
++:where([data-bs-theme="light"]) .navbar { // bslib-patched: explicitly set navbar props in light mode regions
    // scss-docs-start navbar-css-vars
    --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
    --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
@@ -22,17 +22,15 @@ index 988bbe09..cbeef8d0 100644
    position: relative;
    display: flex;
    display: -webkit-flex;
-@@ -296,7 +299,8 @@
+@@ -296,6 +299,7 @@
  }
  
  .navbar-dark,
--.navbar[data-bs-theme="dark"] {
-+:where([data-bs-theme="dark"] .navbar), // bslib-patched: dark mode inside dark regions
-+:where(.navbar[data-bs-theme="dark"]) {
++:where([data-bs-theme="dark"]) .navbar, // bslib-patched: dark mode inside dark regions
+ .navbar[data-bs-theme="dark"] {
    // scss-docs-start navbar-dark-css-vars
    --#{$prefix}navbar-color: #{$navbar-dark-color};
-   --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
-@@ -309,10 +313,31 @@
+@@ -309,10 +313,32 @@
    // scss-docs-end navbar-dark-css-vars
  }
  
@@ -51,7 +49,7 @@ index 988bbe09..cbeef8d0 100644
    }
  }
 +
-+:where(.navbar[data-bs-theme="light"]) {
++.navbar[data-bs-theme="light"] {
 +  // bslib-patched: Make sure local light navbar overrides page global
 +  --#{$prefix}navbar-color: #{$navbar-light-color};
 +  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
@@ -60,8 +58,10 @@ index 988bbe09..cbeef8d0 100644
 +  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
 +  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
 +  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
-+}  
-+:where(.navbar[data-bs-theme="light"] .navbar-toggler-icon) {
-+  // bslib-patched: Make sure toggler icon follows local light mode, too
-+  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
++
++  .navbar-toggler-icon {
++    // bslib-patched: Make sure toggler icon follows local light mode, too
++    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
++  }
 +}
+\ No newline at end of file

From ecd2137e2bf76764e0582a13b9053a6008e70790 Mon Sep 17 00:00:00 2001
From: Garrick Aden-Buie <garrick@adenbuie.com>
Date: Tue, 3 Dec 2024 13:40:46 -0500
Subject: [PATCH 14/16] fix(navbar): Use `:where()` when setting navbar bg to
 ensure that utility classes will win

---
 inst/bs3compat/_navbar_compat.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/inst/bs3compat/_navbar_compat.scss b/inst/bs3compat/_navbar_compat.scss
index c869dcaa1..bad66a8cd 100644
--- a/inst/bs3compat/_navbar_compat.scss
+++ b/inst/bs3compat/_navbar_compat.scss
@@ -117,13 +117,13 @@ ul.nav.navbar-nav {
     background-color: $navbar-bg;
   }
   
-  :where([data-bs-theme="dark"] .navbar) { @include navbar-background-dark(); }
-  :where([data-bs-theme="light"] .navbar, .navbar) { @include navbar-background-light(); }
+  [data-bs-theme="dark"] :where(.navbar) { @include navbar-background-dark(); }
+  [data-bs-theme="light"] :where(.navbar), :where(.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.
-  :where(.navbar[data-bs-theme="dark"]) { @include navbar-background-dark(); }
-  :where(.navbar[data-bs-theme="light"]) { @include navbar-background-light(); }
+  :where(.navbar)[data-bs-theme="dark"] { @include navbar-background-dark(); }
+  :where(.navbar)[data-bs-theme="light"] { @include navbar-background-light(); }
 }
 
 // Implement bs3 navbar toggler; used in Rmd websites, i.e.

From fd2e808f035965275ba4e08393a5a0da135f1da2 Mon Sep 17 00:00:00 2001
From: Garrick Aden-Buie <garrick@adenbuie.com>
Date: Tue, 3 Dec 2024 13:57:54 -0500
Subject: [PATCH 15/16] feat!(navbars): Don't use BS3 compat for navbars in
 BS5+

---
 R/bs-theme-preset-bootswatch.R | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/R/bs-theme-preset-bootswatch.R b/R/bs-theme-preset-bootswatch.R
index a670ad6eb..f7a9e76a0 100644
--- a/R/bs-theme-preset-bootswatch.R
+++ b/R/bs-theme-preset-bootswatch.R
@@ -96,9 +96,14 @@ bootswatch_bundle <- function(bootswatch, version) {
         # Use local fonts (this path is relative to the bootstrap HTML dependency dir)
         '$web-font-path: "font.css" !default;',
         bootswatch_sass_file(bootswatch, "variables", version),
-        # Unless we change navbarPage()'s markup, BS4+ will likely want BS3 compatibility
+        # BS4 navbars are matched with BS3 for compatibility
         switch_version(
-          version, three = "", default = bs3compat_navbar_defaults(bootswatch)
+          version, 
+          three = "",
+          four = bs3compat_navbar_defaults(bootswatch),
+          # BS5 uses more neutral defaults (navbar that flips in light/dark mode)
+          # or requires a bit more user input
+          default = list()
         )
       ),
       rules = list(

From 533fa6427f76edce2afc3c6c0aa178c0355a56de Mon Sep 17 00:00:00 2001
From: Garrick Aden-Buie <garrick@adenbuie.com>
Date: Wed, 4 Dec 2024 10:45:27 -0500
Subject: [PATCH 16/16] chore: whitespace fixes

---
 inst/builtin/bs5/shiny/_rules.scss    | 2 +-
 inst/lib/bs5/scss/_navbar.scss        | 2 +-
 tools/patches/034-bs5-navbar-bg.patch | 3 +--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/inst/builtin/bs5/shiny/_rules.scss b/inst/builtin/bs5/shiny/_rules.scss
index 4bcb69c41..64f022e9e 100644
--- a/inst/builtin/bs5/shiny/_rules.scss
+++ b/inst/builtin/bs5/shiny/_rules.scss
@@ -183,7 +183,7 @@ $bslib-checkbox-radio-margin-right: 0.35em !default;
     .navbar {
       border-bottom: none;
     }
-    
+
     > .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;
diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
index d4e32d1ff..ec497278c 100644
--- a/inst/lib/bs5/scss/_navbar.scss
+++ b/inst/lib/bs5/scss/_navbar.scss
@@ -341,4 +341,4 @@
     // bslib-patched: Make sure toggler icon follows local light mode, too
     --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
   }
-}
\ No newline at end of file
+}
diff --git a/tools/patches/034-bs5-navbar-bg.patch b/tools/patches/034-bs5-navbar-bg.patch
index b03d54d21..d8a57b5ca 100644
--- a/tools/patches/034-bs5-navbar-bg.patch
+++ b/tools/patches/034-bs5-navbar-bg.patch
@@ -1,5 +1,5 @@
 diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
-index 988bbe09..d4e32d1f 100644
+index 988bbe09..ec497278 100644
 --- a/inst/lib/bs5/scss/_navbar.scss
 +++ b/inst/lib/bs5/scss/_navbar.scss
 @@ -3,7 +3,8 @@
@@ -64,4 +64,3 @@ index 988bbe09..d4e32d1f 100644
 +    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
 +  }
 +}
-\ No newline at end of file