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

2 files changed, 16 insertions, 8 deletions

diff --git a/django/contrib/admin/static/admin/css/autocomplete.css b/django/contrib/admin/static/admin/css/autocomplete.css
index 88e9eacb9a..69c94e7347 100644
--- a/django/contrib/admin/static/admin/css/autocomplete.css
+++ b/django/contrib/admin/static/admin/css/autocomplete.css
@@ -80,7 +80,7 @@ select.admin-autocomplete {
 }
 
 .select2-container--admin-autocomplete.select2-container--disabled .select2-selection--single {
-    background-color: #eee;
+    background-color: var(--darkened-bg);
     cursor: default;
 }
 
@@ -94,7 +94,7 @@ select.admin-autocomplete {
 }
 
 .select2-container--admin-autocomplete .select2-selection--multiple {
-    background-color: white;
+    background-color: var(--body-bg);
     border: 1px solid var(--border-color);
     border-radius: 4px;
     cursor: text;
@@ -130,7 +130,7 @@ select.admin-autocomplete {
 }
 
 .select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice {
-    background-color: #e4e4e4;
+    background-color: var(--darkened-bg);
     border: 1px solid var(--border-color);
     border-radius: 4px;
     cursor: default;
@@ -172,7 +172,7 @@ select.admin-autocomplete {
 }
 
 .select2-container--admin-autocomplete.select2-container--disabled .select2-selection--multiple {
-    background-color: #eee;
+    background-color: var(--darkened-bg);
     cursor: default;
 }
 
@@ -190,12 +190,20 @@ select.admin-autocomplete {
     border-bottom-right-radius: 0;
 }
 
+.select2-container--admin-autocomplete .select2-search--dropdown {
+    background: var(--darkened-bg);
+}
+
 .select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field {
+    background: var(--body-bg);
+    color: var(--body-fg);
     border: 1px solid var(--border-color);
+    border-radius: 4px;
 }
 
 .select2-container--admin-autocomplete .select2-search--inline .select2-search__field {
     background: transparent;
+    color: var(--body-fg);
     border: none;
     outline: 0;
     box-shadow: none;
@@ -257,7 +265,7 @@ select.admin-autocomplete {
 
 .select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] {
     background-color: var(--primary);
-    color: var(--body-bg);
+    color: var(--primary-fg);
 }
 
 .select2-container--admin-autocomplete .select2-results__group {
diff --git a/django/contrib/admin/static/admin/css/base.css b/django/contrib/admin/static/admin/css/base.css
index c914c51546..1cb3acdbe7 100644
--- a/django/contrib/admin/static/admin/css/base.css
+++ b/django/contrib/admin/static/admin/css/base.css
@@ -9,6 +9,7 @@
   --primary: #79aec8;
   --secondary: #417690;
   --accent: #f5dd5d;
+  --primary-fg: #fff;
 
   --body-fg: #333;
   --body-bg: #fff;
@@ -18,7 +19,7 @@
   --header-color: #ffc;
   --header-branding-color: var(--accent);
   --header-bg: var(--secondary);
-  --header-link-color: #fff;
+  --header-link-color: var(--primary-fg);
 
   --breadcrumbs-fg: #c4dce8;
   --breadcrumbs-link-fg: var(--body-bg);
@@ -59,14 +60,13 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --primary: #264b5d;
+    --primary-fg: #eee;
 
     --body-fg: #eeeeee;
     --body-bg: #121212;
     --body-quiet-color: #e0e0e0;
     --body-loud-color: #ffffff;
 
-    --header-link-color: #eeeeee;
-
     --breadcrumbs-link-fg: #e0e0e0;
     --breadcrumbs-bg: var(--primary);