data-bs-theme="dark" behaves differently compared to CSS class `navbar-dark` #38973

nenadvicentic · 2023-07-27T15:01:58Z

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 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

The text was updated successfully, but these errors were encountered:

julien-deramond · 2023-07-27T17:15:26Z

Thanks for reporting this issue @nenadvicentic. This is probably just a reduced test case but if you add data-bs-theme="light" to the dropdown, can it resolve your issue?
Something like https://codepen.io/julien-deramond/pen/OJaBqbd

nenadvicentic · 2023-07-27T17:44:12Z

@julien-deramond The problem with your solution is that it breaks intended light/dark mode behavior. <html data-bs-theme="dark"> can no longer affect the dropdown on which you put 'data-bs-theme="light"' attribute.

I am not sure if codepen examples can attach HTML attribute to <html> tag, so it is hard to show that.

Original approach with navbar-dark leaves dropdown "alone", so it can follow color scheme of light/dark mode, like any other dropdown outside of the navbar.

Update

I managed to toggle data-bs-theme attribute via button and some JavaScript. I updated my original codepen samples and also extended your example, so it is clear what is going on:
https://codepen.io/nenadvicentic/pen/rNQqbxp

julien-deramond · 2023-07-27T19:28:43Z

Yep, I think I understand what you mean here. I'm writing this answer a bit quickly, I hope I won't make too many mistakes in the following explanation.

.navbar-dark can't be replaced exactly by data-bs-theme="dark" because of the elements contained in the navbar. I'll use the search <input> as an example because I think it's the same thing as the dropdown (in the same spirit).

Before, with only a light mode available, you were able to do:

Blue or black or whatever bg color navbar -> with .navbar-dark text colors were white
Light blue, white, or whatever bg color navbar -> without .navbar-dark text colors were black
And all of that with always the search <input> in light mode

So the naming was .navbar-dark but what it really meant was it switched the colors of the text (and maybe other stuff whose I don't remember).

Now, we've deprecated the .navbar-dark to avoid confusion with the actual dark mode. Because what would be a dark navbar in dark mode if the "light version" is already dark.

That being said, I think that saying that it's replaced by data-bs-theme="dark" is kinda not true. Because data-bs-theme="dark" won't switch only the component but in fact all the DOM from there (inside of it) in dark mode. It means that whatever you're going to do, the search <input> will have a dark bg (and so your dropdown too).

While I think it makes sense for containers on a page that can be contextually dark, components in those containers that can be contextually dark. However, I have to admit that maybe it's never the case for the navbars.

Back to your example, you're in fact in the same case (if I understand well) as the one in our documentation. It means that you can't no more use .navbar-dark, you can't use data-bs-theme="dark", so you have to use the normal one, and your background is dark blue and the text would be black.
In our doc, we have extra CSS to cover that:

.navbar-toggler,
  .nav-link {
    padding-right: $spacer * .25;
    padding-left: $spacer * .25;
    color: rgba($white, .85);

    &:hover,
    &:focus {
      color: $white;
    }

    &.active {
      font-weight: 600;
      color: $white;
    }
  }

In dark mode, our header has the right rendering:

In light mode, without this CSS, the rendering would be:

So I don't say it was not a mistake to deprecate this .navbar-dark, maybe it was. Maybe we should add something like .navbar-opposite or something like that. We've spotted other issues with this first iteration regarding the color modes that we'll try to cover/improve in the v5.3.2. I'll try to re-think about this specific use case after my holidays for the v5.3.2 (or later in v6 if too many breaking changes should happen) to see if things could be done differently.

Don't hesitate to tell me if I covered correctly your use case in this explanation. The topic can be complicated as design systems are different, use cases are different, and sometimes dark variants are the same as dark mode, and sometimes they are different.
Anyway, feedback like yours is really useful, thanks for that 🙏

nenadvicentic · 2023-07-28T09:52:14Z

@julien-deramond Thank you for this very useful and clear reply. Yes, you hit my use case straight to the point.

I think the main confusion comes from the fact that two different concepts of "dark" are now mixed together. From my point of view navbar-dark was doing something useful and different from what dark-mode does.

It is easiest to explain on buttons example from the documentation:
https://getbootstrap.com/docs/5.3/components/buttons/#variants

In the auto/light mode and Bootstrap versions preceding 5.3, they look like this:

Text color in buttons switches from white to black, calculated based on $min-contrast-ratio SCSS variable value. So lighter the background becomes, text eventually switches from white to black.

If we switch page to the dark mode, correctly, none of the buttons text color changes:

btn-primary keeps it's white color, because background is blue. Contrast is preserved.

We both wanted do achieve same behavior with a navbar. When we assign color to a navbar, for example bg-primary, to have a class that will "tell" to navbar have same behavior as a button, (while nested dropdowns do change with a color mode settings).

So, how I see this, navbar-dark was telling "use bright text color because I am dark". Perhaps more general class could be added named something like text-contrast and made generally applicable to any component?

<nav class="navbar bg-primary text-contrast" aria-label="Top Navigation Bar">
</nav>
<nav class="navbar bg-secondary text-contrast" aria-label="Top Navigation Bar">
</nav>
<nav class="navbar bg-warning text-contrast" aria-label="Top Navigation Bar">
</nav>
<nav class="navbar bg-info text-contrast" aria-label="Top Navigation Bar">
</nav>

If this is not feasible perhaps simpler to understand option would be to introduce btn-text-primary and similar classes:

<nav class="navbar bg-primary btn-text-primary" aria-label="Top Navigation Bar">
</nav>
<nav class="navbar bg-secondary btn-text-secondary " aria-label="Top Navigation Bar">
</nav>
<nav class="navbar bg-warning btn-text-warning " aria-label="Top Navigation Bar">
</nav>
<nav class="navbar bg-info btn-text-info " aria-label="Top Navigation Bar">
</nav>

From my point of view, it is important not to mix concepts of text contrast and light/dark modes. And I think that recommending to use data-bs-theme attributes on different elements inside of a page to achieve certain color scheme or contrast tends to blur this two concepts.

Knud13 · 2024-06-11T04:46:41Z

I just came across this issue when changing the background color for navbars.
I've added the following css to any background colors that require light text e.g. my danger, warning, success, info, primary colors are dark and need white text. I've added this into my sass file but I'm sure you can just add it into your CSS file.

.navbar.bg-warning,
.navbar.bg-success,
.navbar.bg-info,
.navbar.bg-primary {
    --bs-navbar-color: rgba(255, 255, 255, 0.55);
    --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
}

someone clever could probably update the SASS rules so this happens automaticlly the same as --bs-btn-color: is worked out

formerlytomato · 2024-12-12T01:44:11Z

When setting data-bs-theme="dark" the navbar-toggler-icon just straight up vanishes. I even tried overriding the background color of the navbar to lime to ensure it wasn't just a "light mode icon" blending into my dark navbar background and it still didn't show up. The toggle collapse still works by clicking into the invisible region where the icon should be, but the icon itself doesn't show up. A black border does show whenever I press on it.

I switched it to navbar-dark and the collapse icon showed again in the way you would expect.

julien-deramond added css v5 color mode labels Jul 27, 2023

julien-deramond added this to v5.3.2 Jul 27, 2023

julien-deramond mentioned this issue Sep 11, 2023

Dark mode Orange-OpenSource/Orange-Boosted-Bootstrap#2223

Merged

julien-deramond removed this from v5.3.2 Sep 13, 2023

julien-deramond added this to v5.3.3 Sep 13, 2023

github-project-automation bot moved this to To do in v5.3.3 Sep 13, 2023

louismaximepiton linked a pull request Sep 15, 2023 that will close this issue

Color mode: Offer an alternative data-bs-theme="body" #39188

Open

10 tasks

julien-deramond moved this from To do to Needs review in v5.3.3 Sep 15, 2023

julien-deramond mentioned this issue Oct 19, 2023

Docs: handle deprecated dark variants more precisely #39291

Open

6 tasks

julien-deramond removed this from v5.3.3 Feb 21, 2024

julien-deramond added this to v5.3.4 Feb 21, 2024

julien-deramond moved this to Needs review in v5.3.4 Feb 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

data-bs-theme="dark" behaves differently compared to CSS class `navbar-dark` #38973

data-bs-theme="dark" behaves differently compared to CSS class `navbar-dark` #38973

nenadvicentic commented Jul 27, 2023 •

edited

Loading

julien-deramond commented Jul 27, 2023

nenadvicentic commented Jul 27, 2023 •

edited

Loading

julien-deramond commented Jul 27, 2023 •

edited

Loading

nenadvicentic commented Jul 28, 2023

Knud13 commented Jun 11, 2024

formerlytomato commented Dec 12, 2024 •

edited

Loading

data-bs-theme="dark" behaves differently compared to CSS class navbar-dark #38973

data-bs-theme="dark" behaves differently compared to CSS class navbar-dark #38973

Comments

nenadvicentic commented Jul 27, 2023 • edited Loading

Prerequisites

Describe the issue

Reduced test cases

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

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

What version of Bootstrap are you using?

julien-deramond commented Jul 27, 2023

nenadvicentic commented Jul 27, 2023 • edited Loading

julien-deramond commented Jul 27, 2023 • edited Loading

nenadvicentic commented Jul 28, 2023

Knud13 commented Jun 11, 2024

formerlytomato commented Dec 12, 2024 • edited Loading

data-bs-theme="dark" behaves differently compared to CSS class `navbar-dark` #38973

data-bs-theme="dark" behaves differently compared to CSS class `navbar-dark` #38973

nenadvicentic commented Jul 27, 2023 •

edited

Loading

nenadvicentic commented Jul 27, 2023 •

edited

Loading

julien-deramond commented Jul 27, 2023 •

edited

Loading

formerlytomato commented Dec 12, 2024 •

edited

Loading