[Bug]: NC 28.0.2 - Icons in toolbar are black instead of white

[arnowelzel]

⚠️ This issue respects the following points: ⚠️

• This is a bug, not a question or a configuration/webserver/proxy issue.
• This issue is not already reported on Github OR Nextcloud Community Forum (I've searched it).
• Nextcloud Server is up to date. See Maintenance and Release Schedule for supported versions.
• I agree to follow Nextcloud's Code of Conduct.

Bug description

All icons in the toolbar are black instead of white.

Steps to reproduce

1. Upgrade von NC 28.0.1 to 28.0.2
2. Go to personal settings, Appearanc and accessibility
3. Selelect "Default background" to get the default background and color
4. Select "no background" for the background, so only the color is used as background without an image
5. See icons in the tab bar to turn black instead of staying white - also the small pill below the "active" icon is still white even with the icons in black.

Expected behavior

Icons in the tab bar are white and not black.

Installation method

Community Web installer on a VPS or web space

Nextcloud Server version

28

Operating system

Debian/Ubuntu

PHP engine version

PHP 8.3

Web server

Apache (supported)

Database engine version

MariaDB

Is this bug present after an update or on a fresh install?

Updated from a MINOR version (ex. 22.1 to 22.2)

Are you using the Nextcloud Server Encryption module?

None

What user-backends are you using?

• Default user-backend (database)
• LDAP/ Active Directory
• SSO - SAML
• Other

Configuration report

No response

List of activated Apps

No response

Nextcloud Signing status

No response

Nextcloud Logs

No response

Additional info

[arnowelzel]

As a workaround I added the following custom CSS:

#header {
  --background-image-invert-if-bright: none;
}

I understand the intention of the original filter invented with NC 28.0.2 - but maybe it would be better to have some option for the icon color instead of a filter.

Edit: another "fix" is to make the background color a bit darker in the personal settings, so the filter to change the icon color to black will not trigger. However this will only work individually for a single user account and the "active tab" pill is still wrong (always white even with black app icons). Having the possibility to define a global system wide theme including the icon colors (and the "active tab" pill of course) would be much better.

[ozls]

I also have this issue. The fix @arnowelzel gave worked for the header icons, but in my case the favicons are also generated as black on blue and are not fixed.

[arnowelzel]

I also have this issue. The fix @arnowelzel gave worked for the header icons, but in my case the favicons are also generated as black on blue and are not fixed.

Did you try to clear the cache of your browser? In my case the favicons are ok, but I cleared the browser cache after adding the custom CSS

[arnowelzel]

I also have this issue. The fix @arnowelzel gave worked for the header icons, but in my case the favicons are also generated as black on blue and are not fixed.

Did you try to clear the cache of your browser? In my case the favicons are ok, but I cleared the browser cache after adding the custom CSS

I stand corrected - indeed some apps have black favicons, but not all of them. I don't understand, how this can happen at all. Even if the favicons are generated, the colors used for that should be based on global preferences and not depending on some app specific rules.

Correct favicons:

Files:

Activity:

Contacts:

Calendar:

Deck:

Collectives:

Tasks:

Wrong favicons:

Photos:

Notes:

[susnux]

The color of the text is based on your background color, it is chosen to have at least 4.5:1 contrast, meaning if you make the background color a bit darker it will be white text.

[ozls]

Changing the tone of blue solved it for me, thank you @susnux. I don't believe the behavior should have changed like this, but I guess that is another debate.

[regs01]

Just updated to 29.0.0 and it is not fixed. Icons are still black.

There is a filter applies, when shouldn't

.app-menu-main .app-menu-entry img[data-v-62f74e6b] {
  filter: var(--background-image-invert-if-bright);
}