#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.
Attachments (1)
Change History (12)
by , 4 years ago
Attachment: | E7E5D8CF-42D4-49E1-B6AF-155931DD93E1.jpeg added |
---|
comment:1 by , 4 years ago
comment:2 by , 4 years ago
Cc: | added |
---|---|
Severity: | Normal → Release blocker |
Type: | Uncategorized → Bug |
Thanks for the report. It looks that we missed autocomplete.css
in b5cef91a91c9dbb697b65ef978a7de0b2c5cf564.
comment:3 by , 4 years ago
Triage Stage: | Unreviewed → Accepted |
---|
comment:4 by , 4 years ago
Owner: | changed from | to
---|---|
Status: | new → assigned |
follow-up: 6 comment:5 by , 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.
follow-up: 7 comment:6 by , 4 years ago
@Matthias Kestenholz Should I assign this ticket to you since you are already working on it?
comment:7 by , 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:9 by , 4 years ago
Triage Stage: | Accepted → Ready for checkin |
---|
Related recent change: https://github.com/django/django/commit/0a802233ec1421e5e59a486be69daef9b112fd0d#diff-e8dc09f76fa6348998f7be2833217b13d1f56d2fbfd067722d9b47cd53363226 for #32018