replacing `navbar-dark` with `data-bs-theme` breaks toggler icon color
Created by: kusma
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
When following the advice from the docs of replacing the deprecated navbar-dark
-class with the data-bs-theme="dark"
-attribute, the navbar-toggler-icon
class no longer renders in a light color, but with a dark one. Changing the "global" theme on the page seems to change the color of the icon, but not changing the theme of the navbar itself.
I'm seeing the same behavior in the Bootstrap docs itself, in the examples right below the advice. All three icons have the same color, regardless of the theme that's set on the navbar itself. Toggling the theme using the menu changes all three to the same color.
I would expect this to respect the theme set closest to the icon, not the one set closest to the root.
Keeping the navbar-dark
-class on the navbar works around the issue, but seems a bit hacky since this class is now deprecated.
Reduced test cases
https://codepen.io/kusma/pen/abjNNEb
What operating system(s) are you seeing the problem on?
Linux
What browser(s) are you seeing the problem on?
Firefox
What version of Bootstrap are you using?
v5.3.0-alpha1