You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
There are two separate but I think related issues:
.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.
.dropdown-menu-dark is marked as deprecated in 5.3 but data-bs-theme="dark" doesn't work at all.
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
The text was updated successfully, but these errors were encountered:
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.
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.
Prerequisites
Describe the issue
There are two separate but I think related issues:
.navbar-dark
is marked as deprecated in 5.3, and addingdata-bs-theme="dark"
to it enables dark color variables. However, setting it on a parent component does not enable those variables..dropdown-menu-dark
is marked as deprecated in 5.3 butdata-bs-theme="dark"
doesn't work at all.Dark navbar code:
Dark dropdown code:
I think I would expect both to work like this:
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
ordropdown-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
The text was updated successfully, but these errors were encountered: