Make WordPress Core

Opened 3 years ago

Last modified 14 months ago

#54368 new defect (bug)

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

Reported by: amin7's profile amin7 Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-screenshots needs-patch 2nd-opinion needs-design
Focuses: ui, css Cc:

Description

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

Attachments (2)

search-input-design.gif (78.7 KB) - added by amin7 3 years ago.
2021-search-widget-dark.png (11.9 KB) - added by sabernhardt 3 years ago.
with searchform template and with search block, at a narrow width

Download all attachments as: .zip

Change History (5)

@sabernhardt
3 years ago

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

#1 @sabernhardt
3 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release
  • Version trunk deleted

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).

#2 @sabernhardt
3 years ago

  • Summary changed from Visibility issue on Input field of search widget of twenty twenty one theme to Twenty Twenty-One: Visibility issue on Input field of search widget in dark mode

#3 @poena
14 months ago

  • Keywords 2nd-opinion needs-design added

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.
Note: See TracTickets for help on using tickets.