Problem/Motivation

With the Gin admin theme:

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

See comment #4 below:

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!

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#6 3629313-6-admin_toolbar_search-default_admin-theme-darkmode1a.jpg95.75 KBdydave
#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!

dydave’s picture

dydave commented
Title: Admin toolbar search not readable in dark mode » Gin theme: Admin toolbar search not readable in dark mode
Category: Bug report » Support request
Issue summary: View changes

Thanks you very much everyone for creating this issue with some basic details and a screenshot, it's greatly appreciated. 🙏

Thanks a lot Julian (@anybody) for investigating this issue and pointing out the potential source of the problem at #4. I have updated the IS with your notes. 👍

I have done a quick search in the Gin theme issue queue for "dark" and found 30 related issues: 😅
https://git.drupalcode.org/project/gin/-/work_items?sort=created_date&st...
I'm really unsure which one(s) could be related with the current issue, but it definitely looks like there are a lot of tickets related with the color contrasts of various elements displayed in dark mode.

If there is anything we could do in module's code, please let us know, we would definitely be open to merge requests and/or compatibility/support code for the Gin theme.

For now, requalifying issue as Support request, as this does not seem to be directly related with the Admin Toolbar module, but rather the Gin theme.

Feel free to let us know if you have any ideas, suggestions or questions on this particular issue or the project in general, we would surely be glad to help.
Thanks in advance!

dydave’s picture

dydave commented
StatusFileSize
new 3629313-6-admin_toolbar_search-default_admin-theme-darkmode1a.jpg95.75 KB

I see... there is also a dark mode now in the core theme "Default Admin"... 🤔
It appears to have been introduced in branch 11.4.x:
https://git.drupalcode.org/project/drupal/-/tree/11.4.x/core/themes/defa...

Not sure if we should be grouping the new core "Default Admin" and contrib Gin themes dark mode behaviors in the same issue:

But in any case, this probably needs to be further investigated and documented so the scope of this issue could be clarified.