Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Navbar color in dark mode uses the $navbar-light-color Sass variable #39070

Open
3 tasks done
Tracked by #2223
smixus opened this issue Aug 18, 2023 · 3 comments · May be fixed by #39441
Open
3 tasks done
Tracked by #2223

Navbar color in dark mode uses the $navbar-light-color Sass variable #39070

smixus opened this issue Aug 18, 2023 · 3 comments · May be fixed by #39441
Labels
color mode css v5

Comments

@smixus
Copy link

smixus commented Aug 18, 2023

Prerequisites

Describe the issue

Using data-bs-theme="dark" applied on the entire body enables dark mode, and most Sass variable customization happens accordingly through 'dark' variables, e.g. $body-bg-dark. However the navbar text color is confusingly controlled by the explicitly-named $navbar-light-color variable despite using dark mode.

Reduced test cases

HTML:

<body data-bs-theme="dark">
    <header>
        <nav class="navbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link">Home</a>
                </li>
            </ul>
        </nav>
    </header>
</body>

Sass:

@import "../lib/bootstrap/scss/functions";

$navbar-light-color: #424242;

@import "../lib/bootstrap/scss/variables";
@import "../lib/bootstrap/scss/variables-dark";

@import "../lib/bootstrap/scss/bootstrap";

Expectation: customizing $navbar-light-color should have no effect due to the use of dark theme.
Actual behavior: $navbar-light-color controls the (dark mode) navbar text color.

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

macOS

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

No response

What version of Bootstrap are you using?

v5.3.1
@github-project-automation github-project-automation bot moved this to To do in v5.3.2 Aug 21, 2023
@julien-deramond julien-deramond mentioned this issue Sep 11, 2023
Merged
@julien-deramond julien-deramond removed this from v5.3.2 Sep 13, 2023
@github-project-automation github-project-automation bot moved this to To do in v5.3.3 Sep 13, 2023
@julien-deramond julien-deramond moved this from To do to To analyze in v5.3.3 Nov 27, 2023
@julien-deramond julien-deramond linked a pull request Nov 27, 2023 that will close this issue
Draft
6 tasks
@github-project-automation github-project-automation bot moved this to To do in v5.3.4 Feb 21, 2024
@julien-deramond julien-deramond moved this from To do to To analyze in v5.3.4 Feb 21, 2024
@julien-deramond julien-deramond removed this from v5.3.3 Feb 21, 2024
@kdubious
Copy link

kdubious commented Oct 15, 2024 •
edited
Loading

I may have stumbled on a related issue.

 <nav class="navbar navbar-expand-md bg-primary" data-bs-theme="dark">
    <div class="container">
      <a class="navbar-brand" href="#">BRAND</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
        aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav me-auto">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
          <a class="nav-link" href="#">About</a>
          <a class="nav-link" href="#">Contact</a>
        </div>
        <div class="d-flex">
          <a class="nav-link" href="#">Login</a>
        </div>
      </div>
    </div>
  </nav>

I would expect the "Login" link (with .nav-link) to be light, but it isn't.

@louismaximepiton + @julien-deramond + @smixus : is this a related Bug, or am I missing something?

@julien-deramond
Copy link
Member

@louismaximepiton + @julien-deramond + @smixus : is this a related Bug, or am I missing something?

I'd say it's not a bug, it looks like it's because you're not using the .nav-link in the right .nav-* parent that would set --bs-nav-link-color (such as .navbar-nav, .nav-underline, etc.).

@kdubious
Copy link

I see, we're back to needing <li class="nav-item"... > to wrap our <a class="nav-link... ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
color mode css v5
Projects
v5.4.0
Status: No status
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

CSS: new $navbar-* aliases for $navbar-light-* Sass vars twbs/bootstrap
3 participants
@kdubious @julien-deramond @smixus