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.

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

Hover color of navbar is invisible in dark mode #1257

Open
itchyny opened this issue Jun 14, 2023 · 7 comments
Open

Hover color of navbar is invisible in dark mode #1257

itchyny opened this issue Jun 14, 2023 · 7 comments

Comments

@itchyny
Copy link

itchyny commented Jun 14, 2023

When the data-bs-theme=dark attribute is added to the html tag, the hover color of navbar remains dark color and the links are invisible. This is likely caused by .navbar[data-bs-theme=dark], where it should be [data-bs-theme=dark] .navbar.

@thomaspark
Copy link
Owner

thomaspark commented Jun 14, 2023

Hi @itchyny, can you tell us which theme has this problem and share a screenshot if possible?

@itchyny
Copy link
Author

itchyny commented Jun 14, 2023

I'm using cosmo theme.
Screenshot 2023-06-14 at 23 14 21
Screenshot 2023-06-14 at 23 20 26

The source code
<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cosmo/bootstrap.min.css" integrity="sha384-bSb9yHB/eTUA7Pblm6w967FkazFKXpcVOsY3xfVsaPGlNxHExcMH/s8pj5BLWmcW" crossorigin="anonymous">
  <script>
    (function() {
      var colorSchemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
      document.documentElement.setAttribute('data-bs-theme', colorSchemeMediaQuery.matches ? 'dark' : 'light');
    })();
  </script>
  <body>
    <nav class="navbar navbar-expand-lg">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <main class="container-lg">
      <div><p>This is the main content.</p></div>
    </main>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

@thomaspark
Copy link
Owner

I recommend adding a class like .bg-body-tertiary or the attribute data-bs-theme="dark" to the navbar itself as described here in the docs:
https://getbootstrap.com/docs/5.3/components/navbar/#color-schemes

@itchyny
Copy link
Author

itchyny commented Jun 14, 2023

As shown above, color mode styles are controlled by the data-bs-theme attribute. This attribute can be applied to the element, or to any other element or Bootstrap component. If applied to the <html> element, it will apply to everything. If applied to a component or element, it will be scoped to that specific component or element.
https://getbootstrap.com/docs/5.3/customize/color-modes/

I think the attribute of html element should be respected as well. What do you reccomend to implement theme toggle switch?

@itchyny
Copy link
Author

itchyny commented Jun 19, 2023

Another reference of Bootstrap support for color modes: https://github.com/twbs/bootstrap/blob/v5.3.0/site/content/docs/5.3/customize/color-modes.md.

@itchyny
Copy link
Author

itchyny commented Jun 26, 2023

I noticed the issue is caused not by the selector, but by the hard corded color here. In the Bootstrap upstream, it is rgba(var(--bs-emphasis-color-rgb), 0.8) so it's responsive (ref).

@itchyny
Copy link
Author

itchyny commented Jul 1, 2023

This is caused by the upstream bug so explained here twbs/bootstrap#38807 (comment).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants