Opened 10 months ago

Closed 10 months ago

Last modified 10 months ago

#34999 closed Uncategorized (invalid)

Admin search bar input doesn't have proper background color when in dark mode

Reported by: Raphaël Stefanini Owned by: nobody
Component: contrib.admin Version: 4.2
Severity: Normal Keywords: UI, contrast, admin
Cc: Triage Stage: Unreviewed
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description

On admin list with search bar input the text, while in dark mode, is light grey and the background is white. the text is hence not readable.

This PR fixes the issue: https://github.com/django/django/pull/17547

Attachments (2)

Screenshot_20231129_101841.png (7.1 KB ) - added by Mariusz Felisiak 10 months ago.
Snapseed.jpeg (76.8 KB ) - added by Raphaël Stefanini 10 months ago.
ios safari

Download all attachments as: .zip

Change History (11)

comment:1 by Raphaël Stefanini, 10 months ago

Summary: Admin search bar in dark mode doesn't have proper background colorAdmin search bar input doesn't have proper background color when in dark mode

comment:2 by Mariusz Felisiak, 10 months ago

Resolution: worksforme
Status: newclosed

Thanks for this ticket, however it works for me without any changes:

Version 0, edited 10 months ago by Mariusz Felisiak (next)

by Mariusz Felisiak, 10 months ago

by Raphaël Stefanini, 10 months ago

Attachment: Snapseed.jpeg added

ios safari

comment:3 by Raphaël Stefanini, 10 months ago

Resolution: worksforme
Status: closednew

I have had the issue both on ios safari and a chromium browser based browser

comment:4 by Mariusz Felisiak, 10 months ago

Resolution: worksforme
Status: newclosed

Again, it works fine for me in both browsers. What version of Django are you using?

comment:5 by Raphaël Stefanini, 10 months ago

I have the issue on Mac and iOS with django version 4.2 and 5.0rc1

comment:6 by Mariusz Felisiak, 10 months ago

Puzzled, the black background is already inherited from base.css:

input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=tel], textarea, select, .vTextField {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 5px 6px;
    margin-top: 0;
    color: var(--body-fg);
    background-color: var(--body-bg);
}

You can try to use TicketClosingReasons/UseSupportChannels where folks will help you debug your issue.

comment:7 by Raphaël Stefanini, 10 months ago

Resolution: worksformeinvalid

Ok, after more investigation on my side this is related a middleware I have in my settings "django_minify_html.middleware.MinifyHtmlMiddleware".

Sorry for the trouble.

comment:8 by Mariusz Felisiak, 10 months ago

Thanks for the follow up.

comment:9 by Raphaël Stefanini, 10 months ago

Adding input:not([type]), before input[type=text], in base.css would solve this issue for me.

Note: See TracTickets for help on using tickets.
Back to Top