callstack / callstack/react-native-paper

Docs: Icon search in dark theme

Open
#4,822 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

### Current behaviour
While searching in the docs for an Icon using dark theme the text input displays whiteish text on white background (css overwrites dark theme).

### Expected behaviour
While searching in the docs for an Icon using dark theme the text input should display whiteish text on a dark background.

### How to reproduce?
Turn on dark mode, go to https://callstack.github.io/react-native-paper/docs/guides/icons/#1-an-icon-name.
At the end of the paragraph open the collapsible list ("See the list of supported icons") and type (i.e. "bug") in the provided text input - the written text is invisible.

### Preview
Currently live in the docs.

### What have you tried so far?
Manually switching off in inspect mode property `background-color: #f0f0f0;` in `.icons-list-searchbar` seems to work properly.

### Your Environment

| software | version
| --------------------- | -------
| firefox | 144.0 (64-bit)
| chromium | 141.0.7390.54 (Official Build)

Contributor guide

Open the contributing guide

Research direction

Search the documentation source for the `.icons-list-searchbar` selector and the icon guide referenced in the issue. Reproduce the search in dark mode, then inspect the selector's theme styling and verify that typed text remains readable on a dark background in the collapsible icon list.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, react-native
Domain
design, documentation, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.