Twenty Twenty-One: Visibility issue on Input field of search widget in dark mode

[amin7]

When the dark mode is on, the search input field is not that visible on the twenty twenty-one theme. ​https://imgur.com/a/bEEjM09

[sabernhardt]

with searchform template and with search block, at a narrow width

[sabernhardt]

Hi and welcome to Trac! Thanks for the report.

This can happen with either the search block (at any screen width) or the legacy search form widget (on smaller screens).

[poena]

I am not sure what the expected result is. If we need to make changes, I think some design help is needed to improve the styles.

Because the black border around the input gets converted to white when dark mode is enabled, it is the same color as the input field. The input field background color and text color does not change with the dark mode.

Currently:

• The search label is visible, indicating that this is a search input field.
• When hovering over the input, the pointer changes to a caret indicating that it is an editable field.
• When hovering over the button, the button color changes, increasing the contrast between the input field and the button.
• When focus is moved to the input, there is a visible dotted outline inside the field.
• When focus is moved to the button, there is a visible dotted outline inside the button.