Morphing navigation navbar menu text becomes unreadable in light theme on dark backgrounds

#19 ยท closed ยท 0 comments

View on GitHub โ†—

hkumar1403

Hi ๐Ÿ‘‹ First of all, great component โ€” really enjoyed using it. I ran into a readability issue when using the **light theme** in a layout where the **page background is dark**. ### Issue When `theme="light"` is used and the surrounding page/background is dark, the navbar menu text becomes hard to read or effectively invisible. This seems to be caused by the combination of: - `text-foreground` / inherited foreground colors - glass / semi-transparent backgrounds - backdrop blur In this scenario, the menu renders correctly, but the text blends into the background and becomes unreadable. ### Expected behavior Menu text should remain clearly readable regardless of the page background when using the light theme. ### What I did to fix it I resolved this locally by: - Avoiding `text-foreground` for the navbar - Explicitly forcing text colors (`text-black` / `text-white`) based on the resolved theme - Ensuring light theme menus use solid or higher-contrast backgrounds This removed the contrast issue without affecting animations or behavior.

Comments