Repository navigation
Dashboard uses wrong color for application bar and text when theming is set to light color #28649
Description
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
- Set a light solid color for your background in the theming app (like light gray)
- Observe that in the dashboard app, the application bar is hardly visible, as the icon color is still white.
- 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 --
Activity
ruedigerkupper commentedon Sep 5, 2021
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 commentedon Sep 5, 2021
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?
[-]Dashboard uses wrong color for application bar[/-][+]Dashboard uses wrong color for application bar and text when theming is set to light color[/+]Volker-K commentedon Nov 2, 2021
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 commentedon Nov 5, 2021
Too bad, Dashboard-App even overwrites the CSS defined in custom-css App and sets almost all backgrounds to transparent.
thstyl2000 commentedon Apr 3, 2022
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 commentedon Sep 1, 2022
This comes even more problematic with the new design update:
szaimen commentedon Sep 1, 2022
@jancborchardt any good idea how to solve that?
szaimen commentedon Sep 2, 2022
Another screenshot:
tgoeg commentedon Jan 26, 2023
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 commentedon Aug 29, 2023
Also (in NC 27.0.2):
Volker-K commentedon Aug 30, 2023
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 commentedon Feb 12, 2024
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 commentedon Feb 12, 2024
Current discussion seems to be here: #42954
joshtrichards commentedon Aug 18, 2024
Looks fixed now in my testing and from that other related issue. Closing, but don't hesitate to nudge me I'm overlooking something. :-)