autocomplete_fields not displaying correctly in dark theme

[Simon Willison]

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

[Simon Willison]

Related recent change: ​https://github.com/django/django/commit/0a802233ec1421e5e59a486be69daef9b112fd0d#diff-e8dc09f76fa6348998f7be2833217b13d1f56d2fbfd067722d9b47cd53363226 for #32018

[Mariusz Felisiak]

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

[Matthias Kestenholz]

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.

[Michel Le Bihan]

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

[Matthias Kestenholz]

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!

[Mariusz Felisiak <felisiak.mariusz@…>]

In 0df5c818:

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

[Mariusz Felisiak <felisiak.mariusz@…>]

In 45033095:

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

Backport of 0df5c8187a9fa9828824ec2b1fdf37d1082d7ebe from main