-
Notifications
You must be signed in to change notification settings - Fork 3.7k
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
Comments
Hi @itchyny, can you tell us which theme has this problem and share a screenshot if possible? |
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> |
I recommend adding a class like |
I think the attribute of html element should be respected as well. What do you reccomend to implement theme toggle switch? |
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. |
This is caused by the upstream bug so explained here twbs/bootstrap#38807 (comment). |
When the
data-bs-theme=dark
attribute is added to thehtml
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
.The text was updated successfully, but these errors were encountered: