Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#32512 closed Bug (fixed)

autocomplete_fields not displaying correctly in dark theme

Reported by: Simon Willison Owned by: Michel Le Bihan
Component: contrib.admin Version: 3.2
Severity: Release blocker Keywords:
Cc: Michel Le Bihan, Matthias Kestenholz, Tom Carrick, Carlton Gibson Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: no

Description

See attached screenshot - the autocomplete_fields option in the Django admin isn't currently compatible with the new dark mode.

My code: https://github.com/simonw/simonwillisonblog/blob/36176767a36e140576a4eaa464f33c7fa65946c6/blog/admin.py

Attachments (1)

E7E5D8CF-42D4-49E1-B6AF-155931DD93E1.jpeg (223.1 KB ) - added by Simon Willison 4 years ago.

Download all attachments as: .zip

Change History (12)

by Simon Willison, 4 years ago

comment:2 by Mariusz Felisiak, 4 years ago

Cc: Michel Le Bihan Matthias Kestenholz Tom Carrick Carlton Gibson added
Severity: NormalRelease blocker
Type: UncategorizedBug

Thanks for the report. It looks that we missed autocomplete.css in b5cef91a91c9dbb697b65ef978a7de0b2c5cf564.

comment:3 by Mariusz Felisiak, 4 years ago

Triage Stage: UnreviewedAccepted

comment:4 by Michel Le Bihan, 4 years ago

Owner: changed from nobody to Michel Le Bihan
Status: newassigned

comment:5 by Matthias Kestenholz, 4 years ago

Something like this fixes it:

diff --git a/django/contrib/admin/static/admin/css/autocomplete.css b/django/contrib/admin/static/admin/css/autocomplete.css
index 88e9eacb9a..f1d5f50550 100644
--- a/django/contrib/admin/static/admin/css/autocomplete.css
+++ b/django/contrib/admin/static/admin/css/autocomplete.css
@@ -190,8 +190,15 @@ select.admin-autocomplete {
     border-bottom-right-radius: 0;
 }

+.select2-container--admin-autocomplete .select2-search--dropdown {
+    background: var(--body-bg);
+    color: var(--body-fg);
+}
+
 .select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field {
     border: 1px solid var(--border-color);
+    background: var(--body-bg);
+    color: var(--body-fg);
 }

 .select2-container--admin-autocomplete .select2-search--inline .select2-search__field {
@@ -257,7 +264,7 @@ select.admin-autocomplete {

 .select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] {
     background-color: var(--primary);
-    color: var(--body-bg);
+    color: var(--header-link-color);
 }

 .select2-container--admin-autocomplete .select2-results__group {

But I think we should introduce a --primary-fg variable (or something) which can be used to make text appearing on a --primary background readable, instead of (ab)using --header-link-color outside the header so much. This also applies to the nav sidebar etc.

in reply to:  5 ; comment:6 by Michel Le Bihan, 4 years ago

@Matthias Kestenholz Should I assign this ticket to you since you are already working on it?

in reply to:  6 comment:7 by Matthias Kestenholz, 4 years ago

No, this was just a quick test; if you're happy with the patch above please submit it. But I think that another variable should be introduced and now's probably the best time to do this, before the first stable release of the theming support. I'd be grateful if you could continue working on this issue. Thanks!

comment:8 by Jacob Walls, 4 years ago

Has patch: set
Version 0, edited 4 years ago by Jacob Walls (next)

comment:9 by Mariusz Felisiak, 4 years ago

Triage Stage: AcceptedReady for checkin

comment:10 by Mariusz Felisiak <felisiak.mariusz@…>, 4 years ago

Resolution: fixed
Status: assignedclosed

In 0df5c818:

Fixed #32512 -- Fixed admin dark theme for autocomplete fields.

comment:11 by Mariusz Felisiak <felisiak.mariusz@…>, 4 years ago

In 45033095:

[3.2.x] Fixed #32512 -- Fixed admin dark theme for autocomplete fields.

Backport of 0df5c8187a9fa9828824ec2b1fdf37d1082d7ebe from main

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