react-native-paper
react-native-paper copied to clipboard
docs(theme): improve icon search visibility in dark mode
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
- Navigate to the documentation site locally:
cd docs && npm start - Go to the Icons page in the documentation
- Toggle to dark theme using the theme switcher
- Try typing in the "Find icon by name…" search input
- 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
Hey @mensonones, thank you for your pull request 🤗. The documentation from this branch can be viewed here.