Opened 2 years ago
Last modified 9 months ago
#54368 new defect (bug)
Twenty Twenty-One: Visibility issue on Input field of search widget in dark mode
Reported by: |
|
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)
Change History (5)
#1
@
2 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
@
2 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
@
9 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.
with searchform template and with search block, at a narrow width