Problem/Motivation

When using the dark mode in browser, the admin_toolbar_search results are not readable:

Steps to reproduce

  1. Install admin_toolbar_search
  2. Use dark mode in browser
  3. Search for something

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#3 dark_mode.png47.97 KBvivek_lnwebworks
admin_toolbar_search-dark-mode-bug.png19.58 KBanybody

Comments

anybody created an issue. See original summary.

vivek_lnwebworks’s picture

vivek_lnwebworks commented

This issue does not appear to be related to the Admin Toolbar module itself. I installed a fresh Drupal 11 instance and enabled the latest Admin Toolbar and Admin Toolbar Search modules. The search bar and search results are displaying correctly there.

This indicates that something in the current site's theme or custom CSS/JS may be overriding or affecting the Admin Toolbar Search styling.

Could you please check whether the theme has any custom CSS/JS or template overrides related to the Admin Toolbar or search component?

vivek_lnwebworks’s picture

vivek_lnwebworks commented
StatusFileSize
new dark_mode.png47.97 KB

Done all the steps but with Claro theme:

Install admin_toolbar_search
Use dark mode in browser
Search for something

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented

@vivek_lnwebworks

I've encountered this in Gin Admin theme and it looks like this is caused by:

.ui-autocomplete.admin-toolbar-search-autocomplete-list {
	color: var(--gin-color-text);
	background-color: var(--gin-bg-layer3);
	border-radius: var(--gin-border-l);
	box-shadow: var(--gin-shadow-l2);
}

/themes/contrib/gin/dist/css/components/toolbar.css

in combination with dark mode!