Dark dropdowns/navbars don't get dark variables with dark theme

[karlshea]

Prerequisites

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

Describe the issue

There are two separate but I think related issues:

1. .navbar-dark is marked as deprecated in 5.3, and adding data-bs-theme="dark" to it enables dark color variables. However, setting it on a parent component does not enable those variables.
2. .dropdown-menu-dark is marked as deprecated in 5.3 but data-bs-theme="dark" doesn't work at all.

Dark navbar code:

.navbar-dark,
.navbar[data-bs-theme="dark"] {
  ...
}

Dark dropdown code:

.dropdown-menu-dark  {
  ...
}

I think I would expect both to work like this:

.navbar-dark,
[data-bs-theme="dark"] .navbar,
.navbar[data-bs-theme="dark"] {
  ...
}

.dropdown-menu-dark,
[data-bs-theme="dark"] .dropdown-menu,
.dropdown-menu[data-bs-theme="dark"] {
  ...
}

Reduced test cases

Use the dark mode toggle on the documentation site, when in dark mode the dropdowns/navbars do not have the configured dark styles that appear when specifically setting navbar-dark or dropdown-menu-dark.

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

macOS

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

Chrome

What version of Bootstrap are you using?

v5.3.3

[julien-deramond]

Thanks for reporting an issue @karlshea

It's not finalized yet, but https://github.com/twbs/bootstrap/pull/39291 might bring some useful information around these use cases:

• Dropdowns > Dark dropdowns
• Navbar > Color schemes

What do you think?

[karlshea]

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.

[AbhishekSharma55]

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

[client9]

See also #41310