Prerequisites
Describe the issue
When we want to have a navbar using bg-primary and need to make text inside of navbar white (bg-body), we could use:
<nav class="navbar bg-primary navbar-dark" aria-label="Top Navigation Bar">
...
</nav>
In that case, dropdowns have white background with default text color, like the page itself.
With the new recommendation, starting with version 5.3, we should replace navbar-dark with data-bs-theme="dark":
<nav class="navbar bg-primary" data-bs-theme="dark" aria-label="Top Navigation Bar">
...
</nav>
While navbar itself looks identical, this turns dropdowns and input boxes inside of dropdown in the "dark" mode (black background and light text, while everything else on the page is still white background and black text).
The problem is that currently there is no way to make dropdown use default background and text colors, while navbar is "dark".
Culprit for this behavior is this rule:
[data-bs-theme=dark] {
//....
}Reduced test cases
Codepen for navbar-dark: https://codepen.io/nenadvicentic/pen/LYXgvVX
Codepen for (broken) data-bs-theme="dark": https://codepen.io/nenadvicentic/pen/XWyxoaB
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome, Firefox
What version of Bootstrap are you using?
5.3.0
Prerequisites
Describe the issue
When we want to have a navbar using
bg-primaryand need to make text inside of navbar white (bg-body), we could use:In that case, dropdowns have white background with default text color, like the page itself.
With the new recommendation, starting with version 5.3, we should replace
navbar-darkwithdata-bs-theme="dark":While navbar itself looks identical, this turns dropdowns and input boxes inside of dropdown in the "dark" mode (black background and light text, while everything else on the page is still white background and black text).
The problem is that currently there is no way to make dropdown use default background and text colors, while navbar is "dark".
Culprit for this behavior is this rule:
Reduced test cases
Codepen for
navbar-dark: https://codepen.io/nenadvicentic/pen/LYXgvVXCodepen for (broken)
data-bs-theme="dark": https://codepen.io/nenadvicentic/pen/XWyxoaBWhat operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome, Firefox
What version of Bootstrap are you using?
5.3.0