Skip to content

Conversation

@mensonones
Copy link

Motivation

The icon search input field in the documentation site was completely invisible in dark theme due to white text being rendered on a white background. This made it impossible for users to see what they were typing when searching for icons, significantly impacting the user experience in dark mode.

Related issue

Fixes #4822

Test plan

  1. Navigate to the documentation site locally: cd docs && npm start
  2. Go to the Icons page in the documentation
  3. Toggle to dark theme using the theme switcher
  4. Try typing in the "Find icon by name…" search input
  5. Verify that:
    • Text is now visible while typing (white text on dark background)
    • Placeholder text is visible with appropriate contrast
    • Input background changes on hover/focus for better UX
    • All states work correctly in both light and dark themes

Before: Text was invisible (white on white)
After: Text is clearly visible with proper contrast using Infima CSS variables

@callstack-bot
Copy link

Hey @mensonones, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Docs: Icon search in dark theme

2 participants