react-native-paper icon indicating copy to clipboard operation
react-native-paper copied to clipboard

docs(theme): improve icon search visibility in dark mode

Open mensonones opened this issue 3 months ago • 1 comments

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

mensonones avatar Oct 18 '25 12:10 mensonones

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

callstack-bot avatar Oct 18 '25 12:10 callstack-bot