Skip to content

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

@Floppy

Description

@Floppy

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions