bootswatch icon indicating copy to clipboard operation
bootswatch copied to clipboard

Brite: unreadable nav-link text with prefers-color-scheme: dark

Open Floppy opened this issue 3 months ago • 2 comments

nav-link text (down the side menu) is unreadable in Brite theme dark mode:

Image

The sidebar has this code:

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link" href="/settings">Organization</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/settings/libraries">Libraries</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/settings/downloads">Downloads</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/settings/appearance">Appearance</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/settings/analysis">Mesh Analysis</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/settings/multiuser">Multiuser</a>
  </li>
</ul>

The top navbar links are also nav-links, but are less visible as I've put bg-primary on the nav. It's also a navbar-nav which does make the links turn light coloured. I suspect that's something I should deal with at my end because of the background class. If I remove the background, the links are readable inside a default navbar-nav. Not sure if that helps...

Here's how it looks in light mode:

Image

Floppy avatar Nov 06 '25 11:11 Floppy

Looks ok on my end. Could be an issue with styles elsewhere or markup higher up. You can add data-bs-theme="dark" to check.

Image Image

thomaspark avatar Nov 07 '25 03:11 thomaspark

Thanks for taking a look - I think I left out what is probably a very important part: I'm using the bootstrap media-query dark mode method. I'll test some more, see if I can create a minimal example for you (or, even better, to prove myself wrong).

Floppy avatar Nov 07 '25 09:11 Floppy