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? |
|
I'm using cosmo theme. 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=darkattribute is added to thehtmltag, 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: