Dashboard uses wrong color for application bar and text when theming is set to light color

[ruedigerkupper]

How to use GitHub

• Please use the 👍 reaction to show that you are affected by the same issue.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

Steps to reproduce

1. Set a light solid color for your background in the theming app (like light gray)
2. Observe that in the dashboard app, the application bar is hardly visible, as the icon color is still white.
3. Observe that in all other apps, the icon color has changed to dark gray and icons are easily visible.

Expected behaviour

The dashboard app should behave like the other apps and change the icon color of the applications bar to dark if a light beackground is set in theming.

Actual behaviour

Icon color in the dashboard app stays on white, making the icons barely visible on a light background.

Server configuration

Operating system:
Ubuntu 20.04

Web server:
Apache

Database:
MariaDB

PHP version:
7.4.3

Nextcloud version: (see Nextcloud admin page)
22.1.1

Updated from an older Nextcloud/ownCloud or fresh install:
Updated from NC 22 (issue was present there, too)

Where did you install Nextcloud from:
Tar

Signing status:

Signing status

No errors have been found.

List of activated apps:

App list

Enabled:
  - accessibility: 1.7.0
  - activity: 2.15.0
  - apporder: 0.13.0
  - audioplayer: 3.2.1
  - bbb: 2.0.0
  - bookmarks: 4.4.1
  - bruteforcesettings: 2.2.0
  - calendar: 2.3.2
  - circles: 22.1.1
  - cloud_federation_api: 1.4.0
  - comments: 1.11.0
  - contacts: 4.0.2
  - contactsinteraction: 1.2.0
  - dashboard: 7.1.0
  - dav: 1.18.0
  - external: 3.9.0
  - extract: 1.3.2
  - federatedfilesharing: 1.11.0
  - federation: 1.11.0
  - files: 1.16.0
  - files_downloadactivity: 1.11.1
  - files_external: 1.12.1
  - files_mindmap: 0.0.25
  - files_pdfviewer: 2.3.0
  - files_rightclick: 1.1.0
  - files_sharing: 1.13.2
  - files_texteditor: 2.14.0
  - files_trashbin: 1.11.0
  - files_versions: 1.14.0
  - files_videoplayer: 1.11.0
  - firstrunwizard: 2.11.0
  - integration_moodle: 1.0.1
  - integration_whiteboard: 0.0.14
  - ldap_contacts_backend: 1.2.0
  - logreader: 2.7.0
  - lookup_server_connector: 1.9.0
  - maps: 0.1.9
  - music: 1.3.1
  - nextcloud_announcements: 1.11.0
  - notes: 4.1.1
  - notifications: 2.10.1
  - oauth2: 1.9.0
  - password_policy: 1.12.0
  - passwords: 2021.7.23
  - photos: 1.4.0
  - privacy: 1.6.0
  - provisioning_api: 1.11.0
  - recommendations: 1.1.0
  - richdocuments: 4.2.2
  - serverinfo: 1.12.0
  - settings: 1.3.0
  - sharebymail: 1.11.0
  - spreed: 12.0.1
  - support: 1.5.0
  - survey_client: 1.10.0
  - systemtags: 1.11.0
  - tasks: 0.14.2
  - text: 3.3.0
  - theming: 1.12.0
  - twofactor_backupcodes: 1.10.1
  - updatenotification: 1.11.0
  - user_ldap: 1.11.0
  - user_status: 1.1.1
  - viewer: 1.6.0
  - weather_status: 1.1.0
  - welcome: 1.0.0
  - workflow_pdf_converter: 1.7.0
  - workflowengine: 2.3.1
Disabled:
  - admin_audit
  - analytics
  - encryption
  - integration_onedrive
  - mail

Nextcloud configuration:

Config report

{
    "system": {
        "instanceid": "***REMOVED SENSITIVE VALUE***",
        "overwrite.cli.url": "https:\/\/cloud.kg-fds.de\/",
        "overwriteprotocol": "https",
        "htaccess.RewriteBase": "\/",
        "passwordsalt": "***REMOVED SENSITIVE VALUE***",
        "secret": "***REMOVED SENSITIVE VALUE***",
        "trusted_domains": [
            "10.16.112.16",
            "cloud.kg-fds.de",
            "nextcloud.kg-fds.de"
        ],
        "trusted_proxies": "***REMOVED SENSITIVE VALUE***",
        "datadirectory": "***REMOVED SENSITIVE VALUE***",
        "dbtype": "mysql",
        "version": "22.1.1.2",
        "dbname": "***REMOVED SENSITIVE VALUE***",
        "dbhost": "***REMOVED SENSITIVE VALUE***",
        "dbport": "",
        "dbtableprefix": "oc_",
        "mysql.utf8mb4": true,
        "dbuser": "***REMOVED SENSITIVE VALUE***",
        "dbpassword": "***REMOVED SENSITIVE VALUE***",
        "installed": true,
        "ldapProviderFactory": "OCA\\User_LDAP\\LDAPProviderFactory",
        "mail_from_address": "***REMOVED SENSITIVE VALUE***",
        "mail_smtpmode": "smtp",
        "mail_sendmailmode": "smtp",
        "mail_domain": "***REMOVED SENSITIVE VALUE***",
        "mail_smtpauth": 1,
        "mail_smtphost": "***REMOVED SENSITIVE VALUE***",
        "mail_smtpport": "25",
        "mail_smtpname": "***REMOVED SENSITIVE VALUE***",
        "mail_smtppassword": "***REMOVED SENSITIVE VALUE***",
        "default_locale": "de_DE.utf8",
        "default_language": "de",
        "app_install_overwrite": [
            "ldaporg",
            "files_external_onedrive",
            "auto_mail_accounts"
        ],
        "maintenance": false,
        "memcache.locking": "\\OC\\Memcache\\Redis",
        "memcache.local": "\\OC\\Memcache\\Redis",
        "memcache.distributed": "\\OC\\Memcache\\Redis",
        "redis": {
            "host": "***REMOVED SENSITIVE VALUE***",
            "port": 0
        },
        "skeletondirectory": "data\/skeleton-kepler",
        "updater.secret": "***REMOVED SENSITIVE VALUE***",
        "theme": "",
        "loglevel": 2
    }
}

Are you using external storage, if yes which one: sftp

Are you using encryption: no

Are you using an external user-backend, if yes which one: LDAP

LDAP configuration (delete this part if not used)

LDAP config

+-------------------------------+-------------------------------------------------------------------------------------------------------------------------------------->
| Configuration                 | s01                                                                                                                                  >
+-------------------------------+-------------------------------------------------------------------------------------------------------------------------------------->
| hasMemberOfFilterSupport      |                                                                                                                                      >
| homeFolderNamingRule          |                                                                                                                                      >
| lastJpegPhotoLookup           | 0                                                                                                                                    >
| ldapAgentName                 | cn=admin,dc=kg-fds,dc=de                                                                                                             >
| ldapAgentPassword             | ***                                                                                                                                  >
| ldapAttributesForGroupSearch  |                                                                                                                                      >
| ldapAttributesForUserSearch   |                                                                                                                                      >
| ldapBackupHost                |                                                                                                                                      >
| ldapBackupPort                |                                                                                                                                      >
| ldapBase                      | dc=kg-fds,dc=de                                                                                                                      >
| ldapBaseGroups                | ou=groups,dc=kg-fds,dc=de                                                                                                            >
| ldapBaseUsers                 | ou=accounts,dc=kg-fds,dc=de                                                                                                          >
| ldapCacheTTL                  | 600                                                                                                                                  >
| ldapConfigurationActive       | 1                                                                                                                                    >
| ldapDefaultPPolicyDN          |                                                                                                                                      >
| ldapDynamicGroupMemberURL     |                                                                                                                                      >
| ldapEmailAttribute            | mail                                                                                                                                 >
| ldapExperiencedAdmin          | 0                                                                                                                                    >
| ldapExpertUUIDGroupAttr       |                                                                                                                                      >
| ldapExpertUUIDUserAttr        |                                                                                                                                      >
| ldapExpertUsernameAttr        | uid                                                                                                                                  >
| ldapExtStorageHomeAttribute   | homeDirectory                                                                                                                        >
| ldapGidNumber                 | gidNumber                                                                                                                            >
| ldapGroupDisplayName          | cn                                                                                                                                   >
| ldapGroupFilter               | *** Sensitive data removed ***
| ldapGroupFilterGroups         |  *** Sensitive data removed ***>
| ldapGroupFilterMode           | 0                                                                                                                                    >
| ldapGroupFilterObjectclass    |                                                                                                                                      >
| ldapGroupMemberAssocAttr      | gidNumber                                                                                                                            >
| ldapHost                      |  *** Sensitive data removed ***                                                                                                                         >
| ldapIgnoreNamingRules         |                                                                                                                                      >
| ldapLoginFilter               | (&(|(objectclass=inetOrgPerson))(|(uid=%uid)(|(mailPrimaryAddress=%uid)(mail=%uid))))                                                >
| ldapLoginFilterAttributes     |                                                                                                                                      >
| ldapLoginFilterEmail          | 1                                                                                                                                    >
| ldapLoginFilterMode           | 0                                                                                                                                    >
| ldapLoginFilterUsername       | 1                                                                                                                                    >
| ldapMatchingRuleInChainState  | unknown                                                                                                                              >
| ldapNestedGroups              | 0                                                                                                                                    >
| ldapOverrideMainServer        |                                                                                                                                      >
| ldapPagingSize                | 500                                                                                                                                  >
| ldapPort                      | 389                                                                                                                                  >
| ldapQuotaAttribute            |                                                                                                                                      >
| ldapQuotaDefault              |                                                                                                                                      >
| ldapTLS                       | 0                                                                                                                                    >
| ldapUserAvatarRule            | default                                                                                                                              >
| ldapUserDisplayName           | displayname                                                                                                                          >
| ldapUserDisplayName2          |                                                                                                                                      >
| ldapUserFilter                | *** Sensitive data removed ***
| ldapUserFilterGroups          |                                                                                                                                      >
| ldapUserFilterMode            | 1                                                                                                                                    >
| ldapUserFilterObjectclass     | inetOrgPerson                                                                                                                        >
| ldapUuidGroupAttribute        | auto                                                                                                                                 >
| ldapUuidUserAttribute         | auto                                                                                                                                 >
| turnOffCertCheck              | 0                                                                                                                                    >
| turnOnPasswordChange          | 0                                                                                                                                    >
| useMemberOfToDetectMembership | 1                                                                                                                                    >
+-------------------------------+-------------------------------------------------------------------------------------------------------------------------------------->

Client configuration

Browser:
Chrome/Chromium

Operating system:
Ubuntu 21.04

Logs

-- no relevant logs --

Web server error log

Web server error log

--- no relevant logs

Nextcloud log (data/nextcloud.log)

Nextcloud log

-- no relevant logs --

[ruedigerkupper]

The background color set in the theming app is #EEEEEE (light gray).

Here is how the application bar looks in dashboard:

And here is how the application bar looks in all the other apps:

In the dashboard, the icons are barely visible. Scrolling down the window adds a dark grey shade in the background, but this is barely acceptable, since users will very often just want to select an application without wanting to interact with the dashboard contents at all.

The problem will become even worse if an admin decides to set #FFFFFF as the background in the theming app. Icons will be completely invisible then. What is the reason the dashboard does not use the same design as all other apps?

[ruedigerkupper]

Confirming that the same happens if I set the dashboard background picture to this PNG that is plain light grey:

But interestingly, if I select the "flyging bug" background picture that comes with the dashboard app and that has a very similar background color, the icon color switches to dark:

Why does it work with that picture but not with the plain light grey one?

[Volker-K]

Same issue here. Dashboard uses background picture from the login but changes the colour of application bar from some blue to transparent. So application icons are almost invisible on our specific background picture.
Why does dashboard use the application bar but not the design we have defined?

[Volker-K]

Too bad, Dashboard-App even overwrites the CSS defined in custom-css App and sets almost all backgrounds to transparent.

[thstyl2000]

Is there any progress on that? Having a light theme and plain light background is a must when viewing on an eink screen.

Thank you for the work you've been putting into!

[szaimen]

This comes even more problematic with the new design update:

[szaimen]

@jancborchardt any good idea how to solve that?

[szaimen]

Another screenshot:

[tgoeg]

I see this with light backgrounds, regardless of whether they are set as custom solid colors or as an uploaded image.
However, my dashboard is deactivated so I don't think this is (only) dashboard related (and the ticket title should be adapted).

What's really strange is that only two icons correctly change to their inverted view when crossing the 50% lightness border.
Custom color on the lighter half of the spectrum gives me this:

Custom color on the darker half gives this (which is correct):

Using v25.0.3.2

[nursoda]

Also (in NC 27.0.2):

[Volker-K]

From NC 25 on (at least I think it was 25) the issue has changed. The Heading with App-Icons, Avatar and Logo does not have a separate colour anymore. The colour set in design settings is now used only in case there is no background image selected, but not only for the heading but for the whole background.
Using the background images delivered with Nextcloud the colour of the icons is changed in a way that they can be seen.
Our own background picture with our building and a cloudy (very, very light grey) sky still causes Nextcloud to use white icons.
I think I will consult our corporate communication guys to get a version of our logo that is not embedded in the colour but in a more transparent design in order to hover over any background and a background picture where Nextcloud handles the colours in an appropriate way.

[ruedigerkupper]

The issue is still present in NC 28.0.2 for some of the icons (see icons on the top right in following screenshot). This is not limited to the dashboard, but appears on every page.

[ruedigerkupper]

Current discussion seems to be here: #42954

[joshtrichards]

Looks fixed now in my testing and from that other related issue. Closing, but don't hesitate to nudge me I'm overlooking something. :-)