[mensonones]

Motivation

The docs Icons page search input is unreadable in dark mode (white text on #f0f0f0). Adds dark styles for the Rspress html.dark class. Supersedes #4823.

Related issue

Fixes #4822

Screenshots / Videos

Before:

After (default / focus):

Test plan

yarn docs dev, open /react-native-paper/docs/guides/icons, switch to dark theme and check the search input in default, hover and focus states. Light theme should look unchanged.

[Doberjohn]

Thanks @mensonones, this is exactly the fix. The html.dark selector and the --rp-c-* variables are right for the Rspress docs, and the text color fix keeps light mode unchanged. Approving.

One optional nit, the hover and focus background could be var(--rp-c-bg-mute, #38373d) instead of the bare hex, like the other rules in the file.

[mensonones]

Thanks @mensonones, this is exactly the fix. The html.dark selector and the --rp-c-* variables are right for the Rspress docs, and the text color fix keeps light mode unchanged. Approving.

One optional nit, the hover and focus background could be var(--rp-c-bg-mute, #38373d) instead of the bare hex, like the other rules in the file.

Thanks for the review! I tried --rp-c-bg-mute for the hover/focus state first, but in dark mode it resolves to #838289, which is too light: the placeholder text becomes hard to read. That's why the hex is used there. Happy to switch it if you prefer another token closer to --rp-c-bg-soft.

[Doberjohn]

Thanks @mensonones, this is exactly the fix. The html.dark selector and the --rp-c-* variables are right for the Rspress docs, and the text color fix keeps light mode unchanged. Approving.
One optional nit, the hover and focus background could be var(--rp-c-bg-mute, #38373d) instead of the bare hex, like the other rules in the file.

Thanks for the review! I tried --rp-c-bg-mute for the hover/focus state first, but in dark mode it resolves to #838289, which is too light: the placeholder text becomes hard to read. That's why the hex is used there. Happy to switch it if you prefer another token closer to --rp-c-bg-soft.

Thanks for checking. That makes sense, keep the hex. Merging as is. Thanks for contributing to Paper!