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 · 0 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 · 0 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
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
2 participants
@julien-deramond @smixus