Thanks for reporting an issue @karlshea

It's not finalized yet, but #39291 might bring some useful information around these use cases:

• Dropdowns > Dark dropdowns
• Navbar > Color schemes

What do you think?

I think this is still a bug, or at least the statement in the docs is misleading: "Instead of adding .dropdown-menu-dark, set data-bs-theme="dark" on the root element, a parent wrapper, or the component itself". That is not the case for either dropdowns or navbars (and possibly other "dark" variables).

And in fact for .dropdown-menu-dark the PR screenshots are actually exposing the bug, see the text "Please note that the rendering in this example is not exactly the same as the contextual dark mode version is darker than the dark variant." That's because the $dropdown-dark-x variables are no longer used without .dropdown-menu-dark.

To use one variable as an example: In _variables.scss there's $dropdown-dark-link-color. The only place that's used is _dropdown.scss in the class .dropdown-menu-dark. If .dropdown-menu-dark is deprecated and removed, that variable becomes useless because there's no [data-bs-theme="dark"] rule on .dropdown to use them.

Another example: _variables.scss $navbar-dark-active-color. That is used on a navbar without .navbar-dark and only [data-bs-theme="dark"], but is not used on a navbar where a parent element (or the html tag) has [data-bs-theme="dark"].

I think this could have slipped by since some of the colors are so similar, but if you set all of the $*-dark* variables to red it becomes a lot more clear when things are or are not working.

Hi there,

I want to contribute to this project and take on this issue as my first task. Could you please assign it to me? I am excited to work towards resolving it and will keep the team updated on my progress.

Thanks