Fix taggit/tagit autocomplete text colour in dark mode

- Relates to #10418

CHANGELOG.txt

@@ -26,6 +26,7 @@ Changelog
  * Fix: Add a more visible active state for side panel toggle buttons (Thibaud Colas)
  * Fix: Debounce and optimise live preview panel to prevent excessive requests (Sage Abdullah)
  * Fix: Use constant-time comparison for image serve URL signatures (Jake Howard)
+ * Fix: Ensure taggit field type-ahead options show correctly in the dark mode theme (Sage Abdullah)
  * Docs: Document how to add non-ModelAdmin views to a `ModelAdminGroup` (Onno Timmerman)
  * Docs: Document how to add StructBlock data to a StreamField (Ramon Wenger)
  * Docs: Update ReadTheDocs settings to v2 to resolve urllib3 issue in linkcheck extension (Thibaud Colas)

client/scss/overrides/_vendor.tagit.scss

@@ -58,6 +58,13 @@
 
 .ui-menu .ui-menu-item .ui-menu-item-wrapper {
   border: 1px solid transparent; // ensure border on hover (active) does not move content
+  color: theme('colors.text-context');
+
+  // use this instead of :hover as the UI's hover state is controlled via JS
+  // and there is a delay before the hover state is removed when the mouse leaves
+  &.ui-state-active {
+    color: theme('colors.text-label-menus-active');
+  }
 }
 
 .tagit-close {

docs/releases/5.1.md

@@ -55,6 +55,7 @@ Thank you to Damilola for his work, and to Google for sponsoring this project.
  * Navigation to translations via the locale dropdown is now accessible for screen reader and keyboard users (Thibaud Colas)
  * Make it possible for speech recognition users to reveal chooser buttons (Thibaud Colas)
  * Use constant-time comparison for image serve URL signatures (Jake Howard)
+ * Ensure taggit field type-ahead options show correctly in the dark mode theme (Sage Abdullah)
 
 ### Documentation