replacing navbar-dark with data-bs-theme breaks toggler icon color

[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