--bs-navbar-toggler-icon-bg variable not set for .navbar-icon-toggler in light mode

[josvleeuwen]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I ran into a problem with the navbar-toggler-icon. For me it was not visible in regular/light mode, but it did become visible in dark mode. In my case I had the .navbar-toggler in a div in my header tag, separate from the .navbar in my header.

When inspecting _navbar.scss I discovered that --#{$prefix}navbar-toggler-icon-bg variable is only set in the .navbar selector, but not in the .navbar-toggler-icon selector.

Then for the dark mode it is set in both the .navbar-dark, .navbar[data-bs-theme="dark"] and also in .navbar-toggler-icon if color-mode is dark.

The latter adds the variable to the .navbar-toggler-icon, making it visible when in dark mode in my case (though the dark and light mode styling does not match).

When I added the following variable to the .navbar-toggler-icon selector it also worked in light mode:

.navbar-toggler-icon {
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
}

Reduced test cases

Here's a working example of the navbar-toggler with and without a navbar/navbar-dark wrapper:

https://codepen.io/Jos-van-Leeuwen/pen/OJqgqBb

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.2

[enix90s]

I think the variable should just be moved,

to:

:root,
[data-bs-theme=light] {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

from:

.navbar {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

---

This is an example of poor repetition because the lines of code are too long.

.navbar-dark,
.navbar[data-bs-theme=dark] {
  --bs-navbar-color: rgba(255, 255, 255, 0.55);
  --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme=dark] .navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}