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.

[karmatosed]

I would recommend in this case we consider closing this issue. Whilst I appreciate it would possibly be a good iteration, for now focusing on bugs is key with older themes such as this. I also think perhaps there is further complication with the design issues here. Taking a different approach as we consider what to do with our older themes will help some of these, so let's consider how we can learn from this.

Thank you everyone.

[karmatosed]

For now, I am going to follow through and close this. Thank you everyone. We can always reconsider based on feedback.