Skip to content

[BUG]: Active sidebar navigation item is unreadable due to light background #568

Closed

Description

@KhawarMehfooz

Affected Module

Core / Admin Panel (Filament sidebar navigation)

What happened?

The active menu item in the Admin panel sidebar renders with a white/light-gray background (var(--gray-100)) applied by the Filament class .fi-sidebar-item.fi-active > .fi-sidebar-item-btn. The panel uses the Nord theme which has a dark sidebar, so the light background makes the active item's text and icon unreadable — white text on a near-white background.

Expected: The active sidebar item is clearly highlighted and its label remains readable against the dark sidebar background.

Actual: The active sidebar item shows a --gray-100 background which clashes with the dark Nord theme, making the text invisible.

Steps to Reproduce

  1. Log in to the Admin panel (/admin)
  2. Observe the sidebar — the currently active navigation item has a washed-out appearance
  3. Inspect the element — it has class fi-active and the rule .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: var(--gray-100); } is being applied

Your Environment

No response

Activity

  1. added this to the v2.0.0-alpha milestone on Jun 24, 2026
  2. added a commit that references this issue on Jul 17, 2026
  3. added a commit that references this issue on Aug 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions